MINOR: chore(doc): update doc for v2

.eslintrc.json

@@ -23,6 +23,7 @@
     "quotes": ["error", "double", "avoid-escape"],
     "semi": ["error", "always"],
     "vue/multi-word-component-names": "off",
+    "vue/no-reserved-component-names": "off",
     "vue/order-in-components": [
       "error",
       {

src/assets/css/variables.css

@@ -2,54 +2,54 @@ html {
   /* base COLORS -------------------------------- */
   /* --------------------------------
   color PRIMARY & VARIANTS -------------------------------- */
-  --color-primary-lighter: rgba(248, 249, 250, 1);
-  --color-primary-light: rgba(67, 78, 105, 1);
   --color-primary: rgba(47, 55, 74, 1);
+  --color-primary-light: rgba(67, 78, 105, 1);
+  --color-primary-lighter: rgba(248, 249, 250, 1);
   --color-primary-dark: rgba(27, 32, 43, 1);
 
   /* --------------------------------
   color SECONDARY & VARIANTS -------------------------------- */
-  --color-secondary-lighter: rgba(255, 252, 242, 1);
-  --color-secondary-light: rgba(250, 212, 94, 1);
   --color-secondary: rgba(249, 199, 44, 1);
+  --color-secondary-light: rgba(250, 212, 94, 1);
+  --color-secondary-lighter: rgba(255, 252, 242, 1);
   --color-secondary-dark: rgba(235, 180, 7, 1);
 
   /* --------------------------------
   colors GREY SHADES - NEUTRAL-------------------------------- */
   --color-white: rgba(255, 255, 255, 1);
-  --color-silver-light: rgba(247, 247, 247, 1);
   --color-silver: rgba(216, 216, 216, 1);
+  --color-silver-light: rgba(247, 247, 247, 1);
   --color-silver-dark: rgba(190, 190, 190, 1);
-  --color-granite-light: rgba(122, 122, 122, 1);
   --color-granite: rgba(96, 96, 96, 1);
-  --color-black-lighter: rgba(0, 0, 0, 0.1);
+  --color-granite-light: rgba(122, 122, 122, 1);
   --color-black: rgba(0, 0, 0, 1);
-
-  /* --------------------------------
-  color TEXT -------------------------------- */
-  --color-text: rgba(47, 55, 74, 1);
+  --color-black-lighter: rgba(0, 0, 0, 0.1);
 
   /* --------------------------------
   color SUCCESS & VARIANTS -------------------------------- */
-  --color-success-lighter: rgba(226, 255, 239, 1);
-  --color-success-light: rgba(0, 200, 92, 1);
   --color-success: rgba(0, 175, 80, 1);
+  --color-success-light: rgba(0, 200, 92, 1);
+  --color-success-lighter: rgba(226, 255, 239, 1);
   --color-success-dark: rgba(0, 149, 68, 1);
 
   /* --------------------------------
   color WARNING & VARIANTS -------------------------------- */
-  --color-warning-lighter: rgba(255, 233, 204, 1);
-  --color-warning-light: rgba(255, 167, 51, 1);
   --color-warning: rgba(255, 145, 0, 1);
+  --color-warning-light: rgba(255, 167, 51, 1);
+  --color-warning-lighter: rgba(255, 233, 204, 1);
   --color-warning-dark: rgba(204, 116, 0, 1);
 
   /* --------------------------------
   color HIGH & VARIANTS -------------------------------- */
-  --color-high-lighter: rgba(255, 237, 234, 1);
-  --color-high-light: rgba(255, 104, 81, 1);
   --color-high: rgba(255, 61, 30, 1);
+  --color-high-light: rgba(255, 104, 81, 1);
+  --color-high-lighter: rgba(255, 237, 234, 1);
   --color-high-dark: rgba(234, 31, 0, 1);
 
+  /* --------------------------------
+  color TEXT -------------------------------- */
+  --color-text: rgba(47, 55, 74, 1);
+
   /* base FONT SIZE -------------------------------- */
   --font-size: 14px;
 

src/web/router.js

@@ -43,19 +43,19 @@ const routes = [
         component: () => import("./views/Layout/Content.vue"),
       },
       {
-        path: "colors",
-        name: "colors",
-        component: () => import("./views/Guidelines/Colors/Colors.vue"),
+        path: "utilities",
+        name: "utilities",
+        component: () => import("./views/Guidelines/Utilities/Utilities.vue"),
       },
       {
-        path: "list",
-        name: "list",
-        component: () => import("./views/Guidelines/List/List.vue"),
+        path: "variables",
+        name: "variables",
+        component: () => import("./views/Guidelines/Variables/Variables.vue"),
       },
       {
-        path: "markup",
-        name: "markup",
-        component: () => import("./views/Guidelines/Markup/Markup.vue"),
+        path: "colors",
+        name: "colors",
+        component: () => import("./views/Guidelines/Colors/Colors.vue"),
       },
       {
         path: "spacing",
@@ -67,16 +67,6 @@ const routes = [
         name: "typography",
         component: () => import("./views/Guidelines/Typography/Typography.vue"),
       },
-      {
-        path: "utilities",
-        name: "utilities",
-        component: () => import("./views/Guidelines/Utilities/Utilities.vue"),
-      },
-      {
-        path: "variables",
-        name: "variables",
-        component: () => import("./views/Guidelines/Variables/Variables.vue"),
-      },
     ],
   },
   {

src/web/store.js

@@ -6,8 +6,6 @@ import guidelines from "./assets/img/icon-guidelines.svg";
 import utilities2 from "./assets/img/icon-utilities2.svg";
 import variables from "./assets/img/icon-variables.svg";
 import colors from "./assets/img/icon-colors.svg";
-import list from "./assets/img/icon-list.svg";
-import markup from "./assets/img/icon-markup.svg";
 import spacing from "./assets/img/icon-spacing.svg";
 import typo from "./assets/img/icon-typo.svg";
 import components from "./assets/img/icon-components.svg";
@@ -60,7 +58,7 @@ export default {
         btn: "Get dev kit",
       },
       {
-        title: "InternalDoc",
+        title: "Internal Doc",
         img: doc,
         path: "internal-doc",
         text: "Documentation, if you want to add your own components",
@@ -94,20 +92,6 @@ export default {
         text: "BIMData uses a color palette to achieve clean interfaces.",
         btn: "View colors",
       },
-      {
-        title: "list",
-        img: list,
-        path: "list",
-        text: "Minimal layout container for displaying a group of items.",
-        btn: "View list",
-      },
-      {
-        title: "Markup & Style",
-        img: markup,
-        path: "markup",
-        text: "How to name your classes to respect the structure already in place.",
-        btn: "View markup",
-      },
       {
         title: "Spacing",
         img: spacing,

src/web/views/GettingStarted/Designers.vue

@@ -1,34 +1,39 @@
 <template>
   <main class="article designers">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">Designers</BIMDataText>
-      <BIMDataText component="h4" color="color-primary" margin="20px 0 10px"
-        >Tooling</BIMDataText
-      >
-      <BIMDataText margin="5px 0"
-        >We use Figma for all our entire design workflow.</BIMDataText
-      >
-      <BIMDataText component="h4" color="color-primary" margin="20px 0 10px"
-        >Fonts</BIMDataText
-      >
-      <BIMDataText margin="5px 0"
-        >We use Roboto fonts, you can download and install them
+      <BIMDataText component="h1" color="color-primary">
+        Designers
+      </BIMDataText>
+
+      <BIMDataText component="h4" color="color-primary" margin="20px 0 10px">
+        Tooling
+      </BIMDataText>
+      <BIMDataText margin="5px 0">
+        We use <a href="https://www.figma.com/" target="_blank">Figma</a> for
+        our entire design workflow.
+      </BIMDataText>
+      <BIMDataText component="h4" color="color-primary" margin="20px 0 10px">
+        Fonts
+      </BIMDataText>
+      <BIMDataText margin="5px 0">
+        We use Roboto fonts, you can download and install them
         <a
           href="https://fonts.google.com/specimen/Roboto?query=Roboto"
           target="_blank"
-          >here</a
-        ></BIMDataText
-      >
+        >
+          here
+        </a>
+      </BIMDataText>
 
-      <BIMDataText component="h4" color="color-primary" margin="20px 0 10px"
-        >Other important resources</BIMDataText
-      >
-      <BIMDataText margin="5px 0"
-        >You can also check our
-        <router-link to="../guidelines-utilities/colors"
-          >brand colors</router-link
-        ></BIMDataText
-      >
+      <BIMDataText component="h4" color="color-primary" margin="20px 0 10px">
+        Other important resources
+      </BIMDataText>
+      <BIMDataText margin="5px 0">
+        You can also check our
+        <router-link to="../guidelines-utilities/colors">
+          brand colors
+        </router-link>
+      </BIMDataText>
     </div>
   </main>
 </template>