MINOR: chore(doc): update doc for v2 (#314)

* MINOR: chore(doc): update doc for v2 * PATCH: fix(doc): add doc for neutral color * PATCH: chore: add neutral utility classes + update deps
bimdata · Sep 18, 2023 · 82a02f4 · 82a02f4
1 parent 5b92712
commit 82a02f4
Show file tree

Hide file tree

Showing 40 changed files with 2,341 additions and 1,865 deletions.
diff --git a/.eslintrc.json b/.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",
       {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,26 +17,25 @@
     "semantic-release": "semantic-release"
   },
   "devDependencies": {
-    "@bimdata/typescript-fetch-api-client": "9.11.0",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^10.0.1",
+    "@semantic-release/commit-analyzer": "^10.0.4",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.0.3",
-    "@semantic-release/npm": "^10.0.4",
-    "@semantic-release/release-notes-generator": "^11.0.3",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "conventional-changelog-eslint": "^4.0.0",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.15.1",
-    "prettier": "^2.8.8",
+    "@semantic-release/github": "^9.0.6",
+    "@semantic-release/npm": "^11.0.0",
+    "@semantic-release/release-notes-generator": "^11.0.7",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "conventional-changelog-eslint": "^5.0.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "prettier": "^3.0.3",
     "prismjs": "^1.29.0",
-    "sass": "^1.63.6",
-    "semantic-release": "^21.0.5",
-    "vite": "^4.3.9",
+    "sass": "^1.67.0",
+    "semantic-release": "^22.0.0",
+    "vite": "^4.4.9",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.4",
     "vue3-clipboard": "^1.0.0"
   }
 }
diff --git a/src/BIMDataComponents/BIMDataIcon/Icon.vue b/src/BIMDataComponents/BIMDataIcon/Icon.vue
@@ -31,13 +31,6 @@ const sizeToPixel = {
 export default {
   name: "BIMDataIcon",
   props: {
-    // name: {
-    // type: String,
-    // required: true,
-    // validator(value) {
-    //   return Object.keys(icons).includes(value);
-    // },
-    // },
     color: {
       type: String,
       default: "default",

diff --git a/src/BIMDataComponents/BIMDataIcon/_BIMDataIcon.scss b/src/BIMDataComponents/BIMDataIcon/_BIMDataIcon.scss
@@ -12,6 +12,9 @@
     &--high {
       fill: var(--color-high);
     }
+    &--neutral {
+      fill: var(--color-neutral);
+    }
     &--primary {
       fill: var(--color-primary);
     }

diff --git a/src/assets/css/utilities/_colors.css b/src/assets/css/utilities/_colors.css
@@ -2,29 +2,36 @@
 .bg-primary {
   background-color: var(--color-primary);
 }
+
 .bg-secondary {
   background-color: var(--color-secondary);
 }
 
-/* background GREY SHADES - NEUTRAL */
+/* background GREY SHADES */
 .bg-white {
   background-color: var(--color-white);
 }
+
 .bg-silver-light {
   background-color: var(--color-silver-light);
 }
+
 .bg-silver {
   background-color: var(--color-silver);
 }
+
 .bg-silver-dark {
   background-color: var(--color-silver-dark);
 }
+
 .bg-granite-light {
   background-color: var(--color-granite-light);
 }
+
 .bg-granite {
   background-color: var(--color-granite);
 }
+
 .bg-black {
   background-color: var(--color-black);
 }
@@ -33,40 +40,53 @@
 .bg-success {
   background-color: var(--color-success);
 }
+
 .bg-warning {
   background-color: var(--color-warning);
 }
+
 .bg-high {
   background-color: var(--color-high);
 }
 
+.bg-neutral {
+  background-color: var(--color-neutral);
+}
+
 /* color BRAND COLORS */
 .color-primary {
   color: var(--color-primary);
 }
+
 .color-secondary {
   color: var(--color-secondary);
 }
 
-/* color GREY SHADES - NEUTRAL */
+/* color GREY SHADES */
 .color-white {
   color: var(--color-white);
 }
+
 .color-silver-light {
   color: var(--color-silver-light);
 }
+
 .color-silver {
   color: var(--color-silver);
 }
+
 .color-silver-dark {
   color: var(--color-silver-dark);
 }
+
 .color-granite-light {
   color: var(--color-granite-light);
 }
+
 .color-granite {
   color: var(--color-granite);
 }
+
 .color-black {
   color: var(--color-black);
 }
@@ -75,40 +95,53 @@
 .color-success {
   color: var(--color-success);
 }
+
 .color-warning {
   color: var(--color-warning);
 }
+
 .color-high {
   color: var(--color-high);
 }
 
+.color-neutral {
+  color: var(--color-neutral);
+}
+
 /* fill BRAND COLORS */
 .fill-primary {
   fill: var(--color-primary);
 }
+
 .fill-secondary {
   fill: var(--color-secondary);
 }
 
-/* fill GREY SHADES - NEUTRAL */
+/* fill GREY SHADES */
 .fill-white {
   fill: var(--color-white);
 }
+
 .fill-silver-light {
   fill: var(--color-silver-light);
 }
+
 .fill-silver {
   fill: var(--color-silver);
 }
+
 .fill-silver-dark {
   fill: var(--color-silver-dark);
 }
+
 .fill-granite-light {
   fill: var(--color-granite-light);
 }
+
 .fill-granite {
   fill: var(--color-granite);
 }
+
 .fill-black {
   fill: var(--color-black);
 }
@@ -117,48 +150,61 @@
 .fill-success {
   fill: var(--color-success);
 }
+
 .fill-warning {
   fill: var(--color-warning);
 }
+
 .fill-high {
   fill: var(--color-high);
 }
 
+.fill-neutral {
+  fill: var(--color-neutral);
+}
+
 /* stroke BRAND COLORS */
 .stroke-primary {
   fill: transparent;
   stroke: var(--color-primary);
 }
+
 .stroke-secondary {
   fill: transparent;
   stroke: var(--color-secondary);
 }
 
-/* stroke GREY SHADES - NEUTRAL */
+/* stroke GREY SHADES */
 .stroke-white {
   fill: transparent;
   stroke: var(--color-white);
 }
+
 .stroke-silver-light {
   fill: transparent;
   stroke: var(--color-silver-light);
 }
+
 .stroke-silver {
   fill: transparent;
   stroke: var(--color-silver);
 }
+
 .stroke-silver-dark {
   fill: transparent;
   stroke: var(--color-silver-dark);
 }
+
 .stroke-granite-light {
   fill: transparent;
   stroke: var(--color-granite-light);
 }
+
 .stroke-granite {
   fill: transparent;
   stroke: var(--color-granite);
 }
+
 .stroke-black {
   fill: transparent;
   stroke: var(--color-black);
@@ -169,11 +215,18 @@
   fill: transparent;
   stroke: var(--color-success);
 }
+
 .stroke-warning {
   fill: transparent;
   stroke: var(--color-warning);
 }
+
 .stroke-high {
   fill: transparent;
   stroke: var(--color-high);
 }
+
+.stroke-neutral {
+  fill: transparent;
+  stroke: var(--color-neutral);
+}
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
@@ -2,54 +2,61 @@ 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-------------------------------- */
+  colors GREY SHADES -------------------------------- */
   --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 NEUTRAL & VARIANTS -------------------------------- */
+  --color-neutral: rgba(32, 93, 189, 1);
+  --color-neutral-light: rgba(51, 117, 221, 1);
+  --color-neutral-lighter: rgba(240, 245, 255, 1);
+  --color-neutral-dark: rgba(25, 72, 145, 1);
+
+  /* --------------------------------
+  color TEXT -------------------------------- */
+  --color-text: rgba(47, 55, 74, 1);
+
   /* base FONT SIZE -------------------------------- */
   --font-size: 14px;
 

diff --git a/src/assets/iconsColors.js b/src/assets/iconsColors.js
@@ -4,6 +4,7 @@ export default Object.freeze([
   "granite",
   "granite-light",
   "high",
+  "neutral",
   "primary",
   "secondary",
   "success",