From b0e8088e369dc658f647a62bcc08c052872b6df6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Micha=C5=82ek?= <rakieta2015@gmail.com>
Date: Fri, 6 Aug 2021 10:49:53 +0200
Subject: [PATCH] Add two theme views

---
 src/_nav.js                    |  24 ++--
 src/router/index.js            |  10 ++
 src/views/theme/ColorTheme.vue |  21 ++++
 src/views/theme/Colors.vue     |  33 +++++
 src/views/theme/Typography.vue | 222 +++++++++++++++++++++++++++++++++
 5 files changed, 298 insertions(+), 12 deletions(-)
 create mode 100644 src/views/theme/ColorTheme.vue
 create mode 100644 src/views/theme/Colors.vue
 create mode 100644 src/views/theme/Typography.vue

diff --git a/src/_nav.js b/src/_nav.js
index 4f2f6d20..17e26c04 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -13,18 +13,18 @@ export default [
   //   _name: 'CNavTitle',
   //   name: 'Theme'
   // },
-  // {
-  //   _name: 'CNavItem',
-  //   name: 'Colors',
-  //   to: '/theme/colors',
-  //   icon: 'cil-drop'
-  // },
-  // {
-  //   _name: 'CNavItem',
-  //   name: 'Typography',
-  //   to: '/theme/typography',
-  //   icon: 'cil-pencil'
-  // },
+  {
+    _name: 'CNavItem',
+    name: 'Colors',
+    to: '/theme/colors',
+    icon: 'cil-drop'
+  },
+  {
+    _name: 'CNavItem',
+    name: 'Typography',
+    to: '/theme/typography',
+    icon: 'cil-pencil'
+  },
   // {
   //   _name: 'CNavTitle',
   //   name: 'Components'
diff --git a/src/router/index.js b/src/router/index.js
index 08017f68..0c5f3509 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,6 +22,16 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"),
       },
+      {
+        path: "/theme/colors",
+        name: "Colors",
+        component: () => import("@/views/theme/Colors.vue"),
+      },
+      {
+        path: "/theme/typography",
+        name: "Typography",
+        component: () => import("@/views/theme/Typography.vue"),
+      },
       {
         path: "/base",
         name: "Base",
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
new file mode 100644
index 00000000..bcedac36
--- /dev/null
+++ b/src/views/theme/ColorTheme.vue
@@ -0,0 +1,21 @@
+<template>
+  <CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
+    <div
+      :class="['theme-color w-75 rounded mb-3', color]"
+      style="padding-top:75%;"
+    ></div>
+    <slot></slot>
+    <ColorView/>
+  </CCol>
+</template>
+
+<script>
+//import ColorView from './ColorView'
+export default {
+  name: 'ColorTheme',
+//  components: { ColorView },
+  props: {
+    color: String,
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
new file mode 100644
index 00000000..d0856fae
--- /dev/null
+++ b/src/views/theme/Colors.vue
@@ -0,0 +1,33 @@
+<template>
+  <CRow>
+    <CCol>
+        <CCard>
+            <CCardHeader>
+                <CIcon name="cil-drop"/> Theme colors
+            </CCardHeader>
+            <CCardBody>
+                <CRow>
+                <ColorTheme color="bg-primary">
+                    <h6>Brand Primary Color</h6>
+                </ColorTheme>
+                <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+                <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+                <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+                <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
+                <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
+                <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
+                <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
+                </CRow>
+            </CCardBody>
+        </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import ColorTheme from './ColorTheme'
+export default {
+  name: "Colors",
+  components: { ColorTheme }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
new file mode 100644
index 00000000..b6c4f831
--- /dev/null
+++ b/src/views/theme/Typography.vue
@@ -0,0 +1,222 @@
+<template>
+  <CRow>
+    <CCol>
+    <CCard>
+      <CCardHeader>
+        Headings
+      </CCardHeader>
+      <CCardBody>
+        <p>Documentation and examples for Bootstrap typography,
+          including global settings, headings, body text, lists, and more.</p>
+        <CTable>
+          <CTableHead>
+            <CTableRow>
+              <CTableHeaderCell>Heading</CTableHeaderCell>
+              <CTableHeaderCell>Example</CTableHeaderCell>
+            </CTableRow>
+          </CTableHead>
+          <CTableBody>
+            <CTableRow>
+              <CTableDataCell>
+                <p>
+                  <code class="highlighter-rouge">
+                    &lt;h1&gt;&lt;/h1&gt;
+                  </code>
+                </p>
+              </CTableDataCell>
+              <CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableDataCell>
+                <p>
+                  <code class="highlighter-rouge">
+                    &lt;h2&gt;&lt;/h2&gt;
+                  </code>
+                </p>
+              </CTableDataCell>
+              <CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableDataCell>
+                <p>
+                  <code class="highlighter-rouge">
+                    &lt;h3&gt;&lt;/h3&gt;
+                  </code>
+                </p>
+              </CTableDataCell>
+              <CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableDataCell>
+                <p>
+                  <code class="highlighter-rouge">
+                    &lt;h4&gt;&lt;/h4&gt;
+                  </code>
+                </p>
+              </CTableDataCell>
+              <CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableDataCell>
+                <p>
+                  <code class="highlighter-rouge">
+                    &lt;h5&gt;&lt;/h5&gt;
+                  </code>
+                </p>
+              </CTableDataCell>
+              <CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableDataCell>
+                <p>
+                  <code class="highlighter-rouge">
+                    &lt;h6&gt;&lt;/h6&gt;
+                  </code>
+                </p>
+              </CTableDataCell>
+              <CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
+            </CTableRow>
+          </CTableBody>
+        </CTable>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        Headings
+      </CCardHeader>
+      <CCardBody>
+        <p>
+          <code class="highlighter-rouge">.h1</code> through
+          <code class="highlighter-rouge">.h6</code>
+          classes are also available, for when you want to match the font
+          styling of a heading but cannot use the associated HTML element.
+        </p>
+        <div class="bd-example">
+          <p class="h1">h1. Bootstrap heading</p>
+          <p class="h2">h2. Bootstrap heading</p>
+          <p class="h3">h3. Bootstrap heading</p>
+          <p class="h4">h4. Bootstrap heading</p>
+          <p class="h5">h5. Bootstrap heading</p>
+          <p class="h6">h6. Bootstrap heading</p>
+        </div>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        Display headings
+      </CCardHeader>
+      <CCardBody>
+        <p>
+          Traditional heading elements are designed to work best in the meat
+          of your page content. When you need a heading to stand out,
+          consider using a <strong>display heading</strong>—a larger,
+           slightly more opinionated heading style.
+        </p>
+        <div class="bd-example bd-example-type">
+          <CTable>
+            <CTableBody>
+              <CTableRow>
+                <CTableDataCell><span class="display-1">Display 1</span></CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableDataCell><span class="display-2">Display 2</span></CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableDataCell><span class="display-3">Display 3</span></CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableDataCell><span class="display-4">Display 4</span></CTableDataCell>
+              </CTableRow>
+            </CTableBody>
+          </CTable>
+        </div>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        Inline text elements
+      </CCardHeader>
+      <CCardBody>
+        <p>
+          Traditional heading elements are designed to work best in the meat
+          of your page content. When you need a heading to stand out,
+          consider using a <strong>display heading</strong>—a larger,
+          slightly more opinionated heading style.
+        </p>
+        <div class="bd-example">
+          <p>You can use the mark tag to <mark>highlight</mark> text.</p>
+          <p><del>
+            This line of text is meant to be treated as deleted text.
+          </del></p>
+          <p><s>
+            This line of text is meant to be treated as no longer accurate.
+          </s></p>
+          <p><ins>
+            This line of text is meant to be treated as an addition to the document.
+          </ins></p>
+          <p><u>This line of text will render as underlined</u></p>
+          <p><small>
+            This line of text is meant to be treated as fine print.
+          </small></p>
+          <p><sCTableRowong>This line rendered as bold text.</sCTableRowong></p>
+          <p><em>This line rendered as italicized text.</em></p>
+        </div>
+      </CCardBody>
+    </CCard>
+    <CCard>
+      <CCardHeader>
+        Description list alignment
+      </CCardHeader>
+      <CCardBody>
+        <p>
+          Align terms and descriptions horizontally by using our grid system’s
+          predefined classes (or semantic mixins). For longer terms, you can
+          optionally add a <code class="highlighter-rouge">.text-truncate</code>
+          class to truncate the text with an ellipsis.
+        </p>
+        <div class="bd-example">
+          <dl class="row">
+            <dt class="col-sm-3">Description lists</dt>
+            <dd class="col-sm-9">
+              A description list is perfect for defining terms.
+            </dd>
+
+            <dt class="col-sm-3">Euismod</dt>
+            <dd class="col-sm-9">
+              <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
+              <p>Donec id elit non mi porta gravida at eget metus.</p>
+            </dd>
+
+            <dt class="col-sm-3">Malesuada porta</dt>
+            <dd class="col-sm-9">
+              Etiam porta sem malesuada magna mollis euismod.
+            </dd>
+
+            <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+            <dd class="col-sm-9">
+              Fusce dapibus, tellus ac cursus commodo, tortor mauris
+              condimentum nibh, ut fermentum massa justo sit amet risus.
+            </dd>
+
+            <dt class="col-sm-3">Nesting</dt>
+            <dd class="col-sm-9">
+              <dl class="row">
+                <dt class="col-sm-4">Nested definition list</dt>
+                <dd class="col-sm-8">
+                  Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
+                </dd>
+              </dl>
+            </dd>
+          </dl>
+        </div>
+      </CCardBody>
+    </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "Typography",
+};
+</script>
\ No newline at end of file