Merge pull request #16 from tikui/use-tikui-theme

Use tikui style instead of bootstrap

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js ${{ matrix.node-version }}

README.md

@@ -13,13 +13,16 @@ Then you can clone this module as a reference and change files you want (don't f
 
 To consume a module, you should install it on your Tikui project using the latest version from `tikui/tikui` and then you have to edit the `tikuiconfig.json` to set the documentation name like your `$MODULE_NAME`.
 
-Here is an example for a module named `tikuidoc-my-custom-module`:
+Here is an example for a module named `tikuidoc-tikui`:
 
 ```json
 {
-  "documentation": "my-custom-module"
+  "documentation": "tikui"
 }
 ```
 
 Then you can do exactly what you do with a standard Tikui project.
 
+## About
+
+Initially, Bootstrap was needed to make the documentation work. Now we have a dedicated style but if you still want to use the Bootstrap one, you may need to install `tikuidoc-bootstrap` and change `tikui` by `bootstrap` in your `tikuiconfig.json`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tikuidoc-tikui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Tikui documentation",
   "main": "tikuidoc.json",
   "scripts": {
@@ -37,7 +37,6 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "bootstrap": "^5.1.1",
     "node": "^14.18.0"
   }
 }

part/code.pug

@@ -1,7 +1,7 @@
-.row
-  .col-12.col-lg-6
+.tikui-line-section.-s24
+  .tikui-line-section--column
     pre.doc-code-example
       code.code.language-html !{htmlCode}
-  .col-12.col-lg-6
+  .tikui-line-section--column
     pre.doc-code-example
       code.code.language-pug !{pugCode}

part/component.pug

@@ -1,3 +1,4 @@
-.markdown !{markdown}
-.render !{render}
-.code !{code}
+.tikui-component
+  .tikui-component--markdown.markdown !{markdown}
+  .tikui-component--render.render !{render}
+  .tikui-component--code.code !{code}

part/template-render.pug

@@ -1 +1 @@
-a.btn.btn-primary.doc-template(href=src target='_blank') Show
+a.tikui-button(href=src target='_blank') Show

part/template.pug

@@ -1,3 +1,4 @@
-.markdown !{markdown}
-.render !{render}
-.code !{code}
+.tikui-component
+  .tikui-component--markdown.markdown !{markdown}
+  .tikui-component--render.render !{render}
+  .tikui-component--code.code !{code}

src/documentation/atom/_atom.scss

@@ -0,0 +1,8 @@
+@import 'button/button';
+@import 'header-item/header-item';
+@import 'image/image';
+@import 'link/link';
+@import 'logo/logo';
+@import 'paragraph/paragraph';
+@import 'quote/quote';
+@import 'title/title';

src/documentation/atom/button/_button.scss

@@ -0,0 +1,59 @@
+$tikui-button-border-width: 1px !default;
+$tikui-button-padding: 19px !default;
+$tikui-button-min-width: 176px !default;
+$tikui-button-line-height: 20px !default;
+$tikui-button-font-size: 16px !default;
+$tikui-button-radius: 30px !default;
+$tikui-button-font-family: $tikui-font-family-main !default;
+
+$tikui-button-color-background: $tikui-color-secondary !default;
+$tikui-button-color-border: $tikui-color-secondary !default;
+$tikui-button-color-text: $tikui-color-text-dark !default;
+
+$tikui-button-focus-blur-radius: 5px !default;
+$tikui-button-focus-color-shadow: $tikui-color-primary !default;
+
+$tikui-button-hover--color-background: scale-color($tikui-button-color-background, $lightness: -10%) !default;
+
+$tikui-button-secondary-color-background: $tikui-color-shade-100 !default;
+$tikui-button-secondary-color-border: $tikui-color-secondary !default;
+$tikui-button-secondary-color-text: $tikui-color-text-dark !default;
+
+$tikui-button-secondary-hover--color-background: $tikui-button-color-background !default;
+
+.tikui-button {
+  box-sizing: border-box;
+  display: inline-block;
+  outline: none;
+  border: $tikui-button-border-width solid $tikui-button-color-border;
+  border-radius: $tikui-button-radius;
+  background-color: $tikui-button-color-background;
+  cursor: pointer;
+  padding: $tikui-button-padding;
+  min-width: $tikui-button-min-width;
+  text-align: center;
+  text-decoration: none;
+  line-height: $tikui-button-line-height;
+  color: $tikui-button-color-text;
+  font-family: $tikui-button-font-family;
+  font-size: $tikui-button-font-size;
+  font-weight: bold;
+
+  &:hover {
+    background-color: $tikui-button-hover--color-background;
+  }
+
+  &:focus {
+    box-shadow: 0 0 $tikui-button-focus-blur-radius $tikui-button-focus-color-shadow;
+  }
+
+  &.-secondary {
+    border-color: $tikui-button-secondary-color-border;
+    background-color: $tikui-button-secondary-color-background;
+    color: $tikui-button-secondary-color-text;
+
+    &:hover {
+      background-color: $tikui-button-secondary-hover--color-background;
+    }
+  }
+}

src/documentation/atom/header-item/_header-item.scss

@@ -0,0 +1,72 @@
+$tikui-header-item-color-text: $tikui-color-text-dark !default;
+$tikui-header-item-font-family: $tikui-font-family-main !default;
+$tikui-header-item-spacing: 6px !default;
+$tikui-header-item-feedback-size: 9px !default;
+$tikui-header-item-feedback-color: $tikui-color-tertiary !default;
+$tikui-header-item-focus-color-shadow: $tikui-color-primary !default;
+$tikui-header-item-focus-radius-shadow: 5px !default;
+$tikui-header-item-font-size: 16px !default;
+$tikui-header-item-text-radius: 3px !default;
+
+$tikui-header-item-large-breakpoint: $tikui-breakpoint-large !default;
+
+$tikui-header-item-small-font-size: 5vw !default;
+
+$tikui-header-item-padding-bottom: $tikui-header-item-spacing + $tikui-header-item-feedback-size;
+
+.tikui-header-item {
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  outline: none;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0 0 $tikui-header-item-padding-bottom;
+  text-decoration: none;
+  color: $tikui-header-item-color-text;
+  font-family: $tikui-header-item-font-family;
+  font-size: $tikui-header-item-font-size;
+
+  &:focus &--text {
+    border-radius: $tikui-header-item-text-radius;
+    box-shadow: 0 0 $tikui-header-item-focus-radius-shadow $tikui-header-item-focus-color-shadow;
+  }
+
+  &:hover &--text {
+    text-decoration: underline;
+  }
+
+  &.-selected {
+    font-weight: bold;
+  }
+
+  &.-selected &--feedback {
+    display: block;
+  }
+
+  &--feedback {
+    display: none;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+
+    &::before {
+      display: inline-block;
+      border-radius: 50%;
+      background-color: $tikui-header-item-feedback-color;
+      width: $tikui-header-item-feedback-size;
+      height: $tikui-header-item-feedback-size;
+      content: '';
+    }
+  }
+}
+
+@media screen and (max-width: $tikui-header-item-large-breakpoint) {
+  .tikui-header-item {
+    font-size: $tikui-header-item-small-font-size;
+  }
+}

src/documentation/atom/image/_image.scss

@@ -0,0 +1,3 @@
+.tikui-image {
+  max-width: 100%;
+}

src/documentation/atom/link/_link.scss

@@ -0,0 +1,3 @@
+.tikui-link {
+  @include tikui-link;
+}

src/documentation/atom/logo/_logo.scss

@@ -0,0 +1,3 @@
+.tikui-logo {
+  max-width: 100%;
+}

src/documentation/atom/paragraph/_paragraph.scss

@@ -0,0 +1,3 @@
+.tikui-paragraph {
+  @include tikui-paragraph;
+}

src/documentation/atom/quote/_quote.scss

@@ -0,0 +1,22 @@
+$tikui-quote-text-color: $tikui-color-text-dark !default;
+$tikui-quote-font-family: $tikui-font-family-main !default;
+$tikui-quote-text-font-size: 16px;
+$tikui-quote-author-font-size: 14px;
+$tikui-quote-author-margin-left: 24px;
+
+.tikui-quote {
+  margin: 0;
+  color: $tikui-quote-text-color;
+  font-family: $tikui-quote-font-family;
+
+  &--text {
+    margin: 0;
+    font-size: $tikui-quote-text-font-size;
+
+  }
+
+  &--author {
+    margin-left: $tikui-quote-author-margin-left;
+    font-size: $tikui-quote-author-font-size;
+  }
+}

src/documentation/atom/title/_title.scss

@@ -0,0 +1,4 @@
+@import 'title-main/title-main';
+@import 'title-brand/title-brand';
+@import 'title-section/title-section';
+@import 'title-part/title-part';

src/documentation/atom/title/title-brand/_title-brand.scss

@@ -0,0 +1,13 @@
+$tikui-title-brand-large-breakpoint: $tikui-breakpoint-large !default;
+
+$tikui-title-brand-small-font-size: 7vw;
+
+.tikui-title-brand {
+  @include tikui-title-brand;
+}
+
+@media screen and (max-width: $tikui-header-item-large-breakpoint) {
+  .tikui-title-brand {
+    font-size: $tikui-title-brand-small-font-size;
+  }
+}

src/documentation/atom/title/title-main/_title-main.scss

@@ -0,0 +1,3 @@
+.tikui-title-main {
+  @include tikui-title-main;
+}

src/documentation/atom/title/title-part/_title-part.scss

@@ -0,0 +1,3 @@
+.tikui-title-part {
+  @include tikui-title-part;
+}

src/documentation/atom/title/title-section/_title-section.scss

@@ -0,0 +1,3 @@
+.tikui-title-section {
+  @include tikui-title-section;
+}

src/documentation/atomic-design/quote/atom.pug

@@ -1,5 +1,5 @@
-figure
-  blockquote.blockquote(cite='http://bradfrost.com/blog/post/atomic-web-design/#atoms')
+figure.tikui-quote
+  blockquote.tikui-quote--text(cite='http://bradfrost.com/blog/post/atomic-web-design/#atoms')
     p Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
     p Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
-  figcaption.blockquote-footer #[cite Atomic Design] by Brad Frost
+  figcaption.tikui-quote--author #[cite Atomic Design] by Brad Frost

src/documentation/atomic-design/quote/molecule.pug

@@ -1,5 +1,5 @@
-figure
-  blockquote.blockquote(cite='http://bradfrost.com/blog/post/atomic-web-design/#molecules')
+figure.tikui-quote
+  blockquote.tikui-quote--text(cite='http://bradfrost.com/blog/post/atomic-web-design/#molecules')
     p Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
     p For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
-  figcaption.blockquote-footer #[cite Atomic Design] by Brad Frost
+  figcaption.tikui-quote--author #[cite Atomic Design] by Brad Frost

src/documentation/atomic-design/quote/organism.pug

@@ -1,5 +1,5 @@
-figure
-  blockquote.blockquote(cite='http://bradfrost.com/blog/post/atomic-web-design/#organisms')
+figure.tikui-quote
+  blockquote.tikui-quote--text(cite='http://bradfrost.com/blog/post/atomic-web-design/#organisms')
     p Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
     p Building up from molecules to organisms encourages creating standalone, portable, reusable components.
-  figcaption.blockquote-footer #[cite Atomic Design] by Brad Frost
+  figcaption.tikui-quote--author #[cite Atomic Design] by Brad Frost

src/documentation/atomic-design/quote/template.pug

@@ -1,4 +1,4 @@
-figure
-  blockquote.blockquote(cite='http://bradfrost.com/blog/post/atomic-web-design/#templates')
+figure.tikui-quote
+  blockquote.tikui-quote--text(cite='http://bradfrost.com/blog/post/atomic-web-design/#templates')
     p Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
-  figcaption.blockquote-footer #[cite Atomic Design] by Brad Frost
+  figcaption.tikui-quote--author #[cite Atomic Design] by Brad Frost

src/documentation/layout-atomic.pug

@@ -3,7 +3,9 @@ extends layout
 block title
   title Tikui
 block body
-  .doc-header
-    block header
-  .doc-content
-    block content
+  .tikui-template-page--header.doc-header
+    .tikui-template-page--container
+      block header
+  .tikui-template-page--body.doc-content
+    .tikui-template-page--container
+      block content