@dolanske/vui 1.0.1 → 1.0.3

package/src/examples/ExampleModals.vue

@@ -1,143 +1,143 @@
-<script setup lang='ts'>
-import type { Sizes } from '../shared/types'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Flex from '../components/Flex/Flex.vue'
-import Modal from '../components/Modal/Modal.vue'
-
-const open = ref(false)
-const open2 = ref(false)
-const open3 = ref(false)
-const open4 = ref(false)
-const open5 = ref(false)
-
-const size = ref<Sizes | 'full'>('s')
-function setSize(s: any) {
-  size.value = s
-  open2.value = true
-}
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Modals
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Button @click="open = !open">
-              Open
-            </Button>
-            <Modal v-model="open">
-              <template #header>
-                <h4>Modal </h4>
-              </template>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?</p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>Sizes</th>
-          <td>
-            <Flex>
-              <Button square @click="setSize('s')">
-                S
-              </Button>
-              <Button square @click="setSize('l')">
-                L
-              </Button>
-              <Button square @click="setSize('full')">
-                Full
-              </Button>
-            </Flex>
-            <Modal v-model="open2" :size>
-              <template #header>
-                <h4>Modal </h4>
-              </template>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?</p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>Centered + separators + can't dismiss</th>
-          <td>
-            <Button @click="open3 = !open3">
-              Open
-            </Button>
-            <Modal v-model="open3" centered :card="{ separators: true }" :can-dismiss="false">
-              <template #header>
-                <h4>What is this?</h4>
-              </template>
-              <p>Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop.</p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>
-            Scrollable
-          </th>
-          <td>
-            <Button @click="open4 = !open4">
-              Open
-            </Button>
-            <Modal v-model="open4" :card="{ separators: true }" scrollable>
-              <template #header>
-                <h4>What is this?</h4>
-              </template>
-              <p class="text-xxxxl">
-                Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi eos dolores ipsa perspiciatis ullam voluptates quos. Recusandae quod atque, laudantium quis, ad quaerat cumque vero quibusdam facilis, blanditiis eius.
-              </p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>
-            Fullscreen
-          </th>
-          <td>
-            <Button @click="open5 = !open5">
-              Open
-            </Button>
-            <Modal v-model="open5" size="screen" :card="{ separators: true }" scrollable>
-              <template #header>
-                <h4>What is this?</h4>
-              </template>
-              <p class="text-xxxxl">
-                Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi eos dolores ipsa perspiciatis ullam voluptates quos. Recusandae quod atque, laudantium quis, ad quaerat cumque vero quibusdam facilis, blanditiis eius. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sed, impedit officia ad earum optio molestiae nihil mollitia quas enim neque repudiandae minus? Odio fugit voluptates enim et iste odit? Lorem, ipsum dolor sit amet consectetur adipisicing elit. In mollitia harum consectetur ad soluta laudantium? In earum animi harum impedit modi dolores, quod ex, ipsa ipsum est perferendis laudantium aut? Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, cupiditate autem aut nisi quas voluptatem dolorem, eaque odit voluptates laboriosam consequuntur dolore alias a provident corporis nemo. Blanditiis, vel! Maiores!
-              </p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang='ts'>
+import type { Sizes } from '../shared/types'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Modal from '../components/Modal/Modal.vue'
+
+const open = ref(false)
+const open2 = ref(false)
+const open3 = ref(false)
+const open4 = ref(false)
+const open5 = ref(false)
+
+const size = ref<Sizes | 'full'>('s')
+function setSize(s: any) {
+  size.value = s
+  open2.value = true
+}
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Modals
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Button @click="open = !open">
+              Open
+            </Button>
+            <Modal v-model="open">
+              <template #header>
+                <h4>Modal </h4>
+              </template>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?</p>
+              <template #footer="{ close }">
+                <Button @click="close">
+                  Close
+                </Button>
+              </template>
+            </Modal>
+          </td>
+        </tr>
+        <tr>
+          <th>Sizes</th>
+          <td>
+            <Flex>
+              <Button square @click="setSize('s')">
+                S
+              </Button>
+              <Button square @click="setSize('l')">
+                L
+              </Button>
+              <Button square @click="setSize('full')">
+                Full
+              </Button>
+            </Flex>
+            <Modal v-model="open2" :size>
+              <template #header>
+                <h4>Modal </h4>
+              </template>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?</p>
+              <template #footer="{ close }">
+                <Button @click="close">
+                  Close
+                </Button>
+              </template>
+            </Modal>
+          </td>
+        </tr>
+        <tr>
+          <th>Centered + separators + can't dismiss</th>
+          <td>
+            <Button @click="open3 = !open3">
+              Open
+            </Button>
+            <Modal v-model="open3" centered :card="{ separators: true }" :can-dismiss="false">
+              <template #header>
+                <h4>What is this?</h4>
+              </template>
+              <p>Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop.</p>
+              <template #footer="{ close }">
+                <Button @click="close">
+                  Close
+                </Button>
+              </template>
+            </Modal>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            Scrollable
+          </th>
+          <td>
+            <Button @click="open4 = !open4">
+              Open
+            </Button>
+            <Modal v-model="open4" :card="{ separators: true }" scrollable>
+              <template #header>
+                <h4>What is this?</h4>
+              </template>
+              <p class="text-xxxxl">
+                Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi eos dolores ipsa perspiciatis ullam voluptates quos. Recusandae quod atque, laudantium quis, ad quaerat cumque vero quibusdam facilis, blanditiis eius.
+              </p>
+              <template #footer="{ close }">
+                <Button @click="close">
+                  Close
+                </Button>
+              </template>
+            </Modal>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            Fullscreen
+          </th>
+          <td>
+            <Button @click="open5 = !open5">
+              Open
+            </Button>
+            <Modal v-model="open5" size="screen" :card="{ separators: true }" scrollable>
+              <template #header>
+                <h4>What is this?</h4>
+              </template>
+              <p class="text-xxxxl">
+                Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi eos dolores ipsa perspiciatis ullam voluptates quos. Recusandae quod atque, laudantium quis, ad quaerat cumque vero quibusdam facilis, blanditiis eius. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sed, impedit officia ad earum optio molestiae nihil mollitia quas enim neque repudiandae minus? Odio fugit voluptates enim et iste odit? Lorem, ipsum dolor sit amet consectetur adipisicing elit. In mollitia harum consectetur ad soluta laudantium? In earum animi harum impedit modi dolores, quod ex, ipsa ipsum est perferendis laudantium aut? Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, cupiditate autem aut nisi quas voluptatem dolorem, eaque odit voluptates laboriosam consequuntur dolore alias a provident corporis nemo. Blanditiis, vel! Maiores!
+              </p>
+              <template #footer="{ close }">
+                <Button @click="close">
+                  Close
+                </Button>
+              </template>
+            </Modal>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExamplePalette.vue

@@ -1,159 +1,159 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import Button from '../components/Button/Button.vue'
-import Flex from '../components/Flex/Flex.vue'
-import Grid from '../components/Grid/Grid.vue'
-import { setColorTheme, theme } from '../shared/theme'
-import ExampleColor from './shared/ExampleColor.vue'
-
-// function getPalette(type: 'light' | 'dark') {
-//   return Array.from(document.styleSheets)
-//     .flatMap((styleSheet: CSSStyleSheet) => Array.from(styleSheet.cssRules))
-//     .filter(
-//       (cssRule: CSSRule): cssRule is CSSStyleRule =>
-//         cssRule instanceof CSSStyleRule && cssRule.selectorText === `:root`,
-//     )
-//     .flatMap((cssRule: CSSStyleRule) => Array.from(cssRule.style))
-//     .filter((style: string) => style.startsWith(`--${type}`))
-// }
-
-// const light = getPalette('light')
-// const dark = getPalette('dark')
-</script>
-
-<template>
-  <div>
-    <h3 class="mb-l">
-      Themes
-    </h3>
-
-    <Grid :columns="2">
-      <Flex class="theme-wrap light" column gap="xxs">
-        <Flex space-between class="mb-l" align-center expand>
-          <h5>Light</h5>
-          <Button :disabled="theme === 'light'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('light')">
-            <template #start>
-              <Icon icon="ph:sun" />
-            </template>
-            Use
-          </Button>
-        </Flex>
-        <ExampleColor name="Bg" color="--light-color-bg" />
-        <ExampleColor name="Bg Medium" color="--light-color-bg-medium" />
-        <ExampleColor name="Bg Raised" color="--light-color-bg-raised" />
-        <ExampleColor name="Bg Lowered" color="--light-color-bg-lowered" />
-        <div class="padder" />
-        <ExampleColor name="Text" color="--light-color-text" />
-        <ExampleColor name="Text Light" color="--light-color-text-light" />
-        <ExampleColor name="Text Lighter" color="--light-color-text-lighter" />
-        <ExampleColor name="Text Lightest" color="--light-color-text-lightest" />
-        <ExampleColor name="Text Invert" color="--light-color-text-invert" />
-        <div class="padder" />
-        <ExampleColor name="Button Gray" color="--light-color-button-gray" />
-        <ExampleColor name="Button Gray Hover" color="--light-color-button-gray-hover" />
-        <div class="padder" />
-        <ExampleColor name="Text Red" color="--light-color-text-red" />
-        <ExampleColor name="Bg Red Lowered" color="--light-color-bg-red-lowered" />
-        <ExampleColor name="Bg Red Raised" color="--light-color-bg-red-raised" />
-        <div class="padder" />
-        <ExampleColor name="Text Green" color="--light-color-text-green" />
-        <ExampleColor name="Bg Green Lowered" color="--light-color-bg-green-lowered" />
-        <ExampleColor name="Bg Green Raised" color="--light-color-bg-green-raised" />
-        <div class="padder" />
-        <ExampleColor name="Text Yellow" color="--light-color-text-yellow" />
-        <ExampleColor name="Bg Yellow Lowered" color="--light-color-bg-yellow-lowered" />
-        <ExampleColor name="Bg Yellow Raised" color="--light-color-bg-yellow-raised" />
-        <div class="padder" />
-        <ExampleColor name="Text Blue" color="--light-color-text-blue" />
-        <ExampleColor name="Bg Blue Lowered" color="--light-color-bg-blue-lowered" />
-        <ExampleColor name="Bg Blue Raised" color="--light-color-bg-blue-raised" />
-        <div class="padder" />
-        <ExampleColor name="Border" color="--light-color-border" />
-        <ExampleColor name="Border Strong" color="--light-color-border-strong" />
-        <ExampleColor name="Border Weak" color="--light-color-border-weak" />
-        <div class="padder" />
-        <ExampleColor name="Accent" color="--light-color-accent" />
-        <ExampleColor name="Bg Accent Lowered" color="--light-color-bg-accent-lowered" />
-        <ExampleColor name="Bg Accent Raised" color="--light-color-bg-accent-raised" />
-      </Flex>
-
-      <Flex class="theme-wrap dark" gap="xxs" column>
-        <Flex space-between class="mb-l" align-center expand>
-          <h5>Dark</h5>
-          <Button :disabled="theme === 'dark'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('dark')">
-            <template #start>
-              <Icon icon="ph:moon" />
-            </template>
-            Use
-          </Button>
-        </Flex>
-        <ExampleColor name="Bg" color="--dark-color-bg" />
-        <ExampleColor name="Bg Medium" color="--dark-color-bg-medium" />
-        <ExampleColor name="Bg Raised" color="--dark-color-bg-raised" />
-        <ExampleColor name="Bg Lowered" color="--dark-color-bg-lowered" />
-        <div class="padder" />
-        <ExampleColor name="Text" color="--dark-color-text" />
-        <ExampleColor name="Text Light" color="--dark-color-text-light" />
-        <ExampleColor name="Text Lighter" color="--dark-color-text-lighter" />
-        <ExampleColor name="Text Lightest" color="--dark-color-text-lightest" />
-        <ExampleColor name="Text Invert" color="--dark-color-text-invert" />
-        <div class="padder" />
-        <ExampleColor name="Button Gray" color="--dark-color-button-gray" />
-        <ExampleColor name="Button Gray Hover" color="--dark-color-button-gray-hover" />
-        <div class="padder" />
-        <ExampleColor name="Text Red" color="--dark-color-text-red" />
-        <ExampleColor name="Bg Red Lowered" color="--dark-color-bg-red-lowered" />
-        <ExampleColor name="Bg Red Raised" color="--dark-color-bg-red-raised" />
-        <div class="padder" />
-        <ExampleColor name="Text Green" color="--dark-color-text-green" />
-        <ExampleColor name="Bg Green Lowered" color="--dark-color-bg-green-lowered" />
-        <ExampleColor name="Bg Green Raised" color="--dark-color-bg-green-raised" />
-        <div class="padder" />
-        <ExampleColor name="Text Yellow" color="--dark-color-text-yellow" />
-        <ExampleColor name="Bg Yellow Lowered" color="--dark-color-bg-yellow-lowered" />
-        <ExampleColor name="Bg Yellow Raised" color="--dark-color-bg-yellow-raised" />
-        <div class="padder" />
-        <ExampleColor name="Text Blue" color="--dark-color-text-blue" />
-        <ExampleColor name="Bg Blue Lowered" color="--dark-color-bg-blue-lowered" />
-        <ExampleColor name="Bg Blue Raised" color="--dark-color-bg-blue-raised" />
-        <div class="padder" />
-        <ExampleColor name="Border" color="--dark-color-border" />
-        <ExampleColor name="Border Strong" color="--dark-color-border-strong" />
-        <ExampleColor name="Border Weak" color="--dark-color-border-weak" />
-        <div class="padder" />
-        <ExampleColor name="Accent" color="--dark-color-accent" />
-        <ExampleColor name="Bg Accent Lowered" color="--dark-color-bg-accent-lowered" />
-        <ExampleColor name="Bg Accent Raised" color="--dark-color-bg-accent-raised" />
-      </Flex>
-    </Grid>
-  </div>
-</template>
-
-<style>
-.padder {
-  height: 16px;
-}
-
-.theme-wrap {
-  padding: var(--space-m);
-  border-radius: var(--border-radius-m);
-
-  &.light {
-    background-color: white;
-
-    h5,
-    span {
-      color: var(--light-color-text) !important;
-    }
-  }
-
-  &.dark {
-    background-color: black;
-
-    h5,
-    span {
-      color: var(--dark-color-text) !important;
-    }
-  }
-}
-</style>
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+import { setColorTheme, theme } from '../shared/theme'
+import ExampleColor from './shared/ExampleColor.vue'
+
+// function getPalette(type: 'light' | 'dark') {
+//   return Array.from(document.styleSheets)
+//     .flatMap((styleSheet: CSSStyleSheet) => Array.from(styleSheet.cssRules))
+//     .filter(
+//       (cssRule: CSSRule): cssRule is CSSStyleRule =>
+//         cssRule instanceof CSSStyleRule && cssRule.selectorText === `:root`,
+//     )
+//     .flatMap((cssRule: CSSStyleRule) => Array.from(cssRule.style))
+//     .filter((style: string) => style.startsWith(`--${type}`))
+// }
+
+// const light = getPalette('light')
+// const dark = getPalette('dark')
+</script>
+
+<template>
+  <div>
+    <h3 class="mb-l">
+      Themes
+    </h3>
+
+    <Grid :columns="2">
+      <Flex class="theme-wrap light" column gap="xxs">
+        <Flex space-between class="mb-l" align-center expand>
+          <h5>Light</h5>
+          <Button :disabled="theme === 'light'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('light')">
+            <template #start>
+              <Icon icon="ph:sun" />
+            </template>
+            Use
+          </Button>
+        </Flex>
+        <ExampleColor name="Bg" color="--light-color-bg" />
+        <ExampleColor name="Bg Medium" color="--light-color-bg-medium" />
+        <ExampleColor name="Bg Raised" color="--light-color-bg-raised" />
+        <ExampleColor name="Bg Lowered" color="--light-color-bg-lowered" />
+        <div class="padder" />
+        <ExampleColor name="Text" color="--light-color-text" />
+        <ExampleColor name="Text Light" color="--light-color-text-light" />
+        <ExampleColor name="Text Lighter" color="--light-color-text-lighter" />
+        <ExampleColor name="Text Lightest" color="--light-color-text-lightest" />
+        <ExampleColor name="Text Invert" color="--light-color-text-invert" />
+        <div class="padder" />
+        <ExampleColor name="Button Gray" color="--light-color-button-gray" />
+        <ExampleColor name="Button Gray Hover" color="--light-color-button-gray-hover" />
+        <div class="padder" />
+        <ExampleColor name="Text Red" color="--light-color-text-red" />
+        <ExampleColor name="Bg Red Lowered" color="--light-color-bg-red-lowered" />
+        <ExampleColor name="Bg Red Raised" color="--light-color-bg-red-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Green" color="--light-color-text-green" />
+        <ExampleColor name="Bg Green Lowered" color="--light-color-bg-green-lowered" />
+        <ExampleColor name="Bg Green Raised" color="--light-color-bg-green-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Yellow" color="--light-color-text-yellow" />
+        <ExampleColor name="Bg Yellow Lowered" color="--light-color-bg-yellow-lowered" />
+        <ExampleColor name="Bg Yellow Raised" color="--light-color-bg-yellow-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Blue" color="--light-color-text-blue" />
+        <ExampleColor name="Bg Blue Lowered" color="--light-color-bg-blue-lowered" />
+        <ExampleColor name="Bg Blue Raised" color="--light-color-bg-blue-raised" />
+        <div class="padder" />
+        <ExampleColor name="Border" color="--light-color-border" />
+        <ExampleColor name="Border Strong" color="--light-color-border-strong" />
+        <ExampleColor name="Border Weak" color="--light-color-border-weak" />
+        <div class="padder" />
+        <ExampleColor name="Accent" color="--light-color-accent" />
+        <ExampleColor name="Bg Accent Lowered" color="--light-color-bg-accent-lowered" />
+        <ExampleColor name="Bg Accent Raised" color="--light-color-bg-accent-raised" />
+      </Flex>
+
+      <Flex class="theme-wrap dark" gap="xxs" column>
+        <Flex space-between class="mb-l" align-center expand>
+          <h5>Dark</h5>
+          <Button :disabled="theme === 'dark'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('dark')">
+            <template #start>
+              <Icon icon="ph:moon" />
+            </template>
+            Use
+          </Button>
+        </Flex>
+        <ExampleColor name="Bg" color="--dark-color-bg" />
+        <ExampleColor name="Bg Medium" color="--dark-color-bg-medium" />
+        <ExampleColor name="Bg Raised" color="--dark-color-bg-raised" />
+        <ExampleColor name="Bg Lowered" color="--dark-color-bg-lowered" />
+        <div class="padder" />
+        <ExampleColor name="Text" color="--dark-color-text" />
+        <ExampleColor name="Text Light" color="--dark-color-text-light" />
+        <ExampleColor name="Text Lighter" color="--dark-color-text-lighter" />
+        <ExampleColor name="Text Lightest" color="--dark-color-text-lightest" />
+        <ExampleColor name="Text Invert" color="--dark-color-text-invert" />
+        <div class="padder" />
+        <ExampleColor name="Button Gray" color="--dark-color-button-gray" />
+        <ExampleColor name="Button Gray Hover" color="--dark-color-button-gray-hover" />
+        <div class="padder" />
+        <ExampleColor name="Text Red" color="--dark-color-text-red" />
+        <ExampleColor name="Bg Red Lowered" color="--dark-color-bg-red-lowered" />
+        <ExampleColor name="Bg Red Raised" color="--dark-color-bg-red-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Green" color="--dark-color-text-green" />
+        <ExampleColor name="Bg Green Lowered" color="--dark-color-bg-green-lowered" />
+        <ExampleColor name="Bg Green Raised" color="--dark-color-bg-green-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Yellow" color="--dark-color-text-yellow" />
+        <ExampleColor name="Bg Yellow Lowered" color="--dark-color-bg-yellow-lowered" />
+        <ExampleColor name="Bg Yellow Raised" color="--dark-color-bg-yellow-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Blue" color="--dark-color-text-blue" />
+        <ExampleColor name="Bg Blue Lowered" color="--dark-color-bg-blue-lowered" />
+        <ExampleColor name="Bg Blue Raised" color="--dark-color-bg-blue-raised" />
+        <div class="padder" />
+        <ExampleColor name="Border" color="--dark-color-border" />
+        <ExampleColor name="Border Strong" color="--dark-color-border-strong" />
+        <ExampleColor name="Border Weak" color="--dark-color-border-weak" />
+        <div class="padder" />
+        <ExampleColor name="Accent" color="--dark-color-accent" />
+        <ExampleColor name="Bg Accent Lowered" color="--dark-color-bg-accent-lowered" />
+        <ExampleColor name="Bg Accent Raised" color="--dark-color-bg-accent-raised" />
+      </Flex>
+    </Grid>
+  </div>
+</template>
+
+<style>
+.padder {
+  height: 16px;
+}
+
+.theme-wrap {
+  padding: var(--space-m);
+  border-radius: var(--border-radius-m);
+
+  &.light {
+    background-color: white;
+
+    h5,
+    span {
+      color: var(--light-color-text) !important;
+    }
+  }
+
+  &.dark {
+    background-color: black;
+
+    h5,
+    span {
+      color: var(--dark-color-text) !important;
+    }
+  }
+}
+</style>