Compare revisions

b35ebe6d · d7182230 · 92ef9519 · e0b6ba65 · 5cf76e39 · 822b9770
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -15,7 +15,7 @@ build:
    - npm run build
  after_script:
    - TAG=`git describe --tags $(git rev-list --tags --max-count=1)`
-    - echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
+    - echo "{\"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
    - "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
  artifacts:
    expire_in: 30 min

--- a/LICENSE
+++ b/LICENSE
--- a/README.md
+++ b/README.md
@@ -35,7 +35,6 @@ The `npm` command will install project dependencies and the `npm run develop`
 command builds the project, sets up a local server for the Patternlab UI and
 watches relevant template files to rebuild on any changes.

-
 ### Build

 The build command compiles the styleguide CSS and the Patternlab output but it
@@ -64,6 +63,7 @@ This will create a new git tag which will be recongnized by the build server and
 - update `latest` pointer
 - update minor version pointer like `1.x.x` in case this was a patch update or minor update
 - update patch version pointer like `1.3.x` in case this was the patch update
+- add `1.3.3` version if the tag name was `1.3.3`

 ### Running locally with Docker

@@ -91,3 +91,43 @@ current project settings. Add/modify icons and finally download your new icon
 font. Delete contents of the `source/icons` and put all the content from your
 downloaded font. When finished, run `npm run update-iconset` that will update
 both the style and pattern file automatically.
+
+
+## Developing other websites with pirati-ui
+
+In order to integrate `pirati-ui` with other websites, you will need to include
+at least the CSS source that defines look and feel. Simply place the following
+code in your `<head>`:
+
+
+```html
+<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
+```
+
+If you want to use the JS enahancements as well, you will also need to:
+
+1. Include Vue.js:
+
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+    ```
+
+2. Include `pirati-ui` JS bundle:
+
+    ```html
+    <script src="[ROOT_URL]/js/main.bundle.js"></script>
+    ```
+
+Make sure that Vue.js is included *before* the JS bundle. The best place for
+both of the JS sources is at the end of your HTML document.
+
+The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
+one of official bundles hosted at `https://styleguide.pir-test.eu`:
+
+- https://styleguide.pir-test.eu/latest/
+- https://styleguide.pir-test.eu/1.x.x/
+- ... and so on
+
+Alternatively, you can run the `pirati-ui` locally. In this case, just run
+`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
+Usually, this will be `http://localhost:3000/`.
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -23,30 +23,6 @@ const postcss = require("gulp-postcss");
 const tailwindcss = require("tailwindcss");
 const rename = require("gulp-rename");
 const assets = require("postcss-assets");
-const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
-  content: [
-    "./source/**/*.mustache",
-    "./source/**/*.json",
-    "./source/**/*.js",
-    "./source/**/*.vue",
-    "./public/**/*.html",
-  ],
-  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-  whitelistPatterns: [
-    /(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width
-    /(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height
-    /(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins
-    /(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings
-    /max-w-*/, // maximum width
-    /grid-cols-\d\d?/, // grid columns
-    /col-span-\d\d?/, // grid spans
-    /row-span-\d\d?/, // grid spans
-    /grid-flow/, // grid flow
-    /(sm|md|lg|xl)(\\:)text-.*/,
-    // /text-*/,
-    /ico--*/, // icons
-  ],
-});


 function resolvePath(pathInput) {
@@ -222,30 +198,7 @@ function reloadJS(done) {
 * TAILWIND AND POSTCSS TASKS
 ******************************************************/

-gulp.task("tailwind-postcss:build", function (done) {
-  return gulp
-    .src("./source/css/style.pcss")
-    .pipe(
-      postcss([
-        require("postcss-import"),
-        tailwindcss("./tailwind.config.js"),
-        require("postcss-nested"),
-        // require('postcss-preset-env'),
-        require("postcss-custom-properties"),
-        require("autoprefixer"),
-        assets({
-          basePath: "source/",
-          loadPaths: ["images/"],
-        }),
-        require("postcss-clean"),
-      ])
-    )
-    .pipe(rename("styles.css"))
-    .pipe(gulp.dest(resolvePath(paths().public.css)))
-    .on("end", done);
-});
-
-gulp.task("tailwind-postcss:build:production", function (done) {
+gulp.task("tailwind-postcss", function (done) {
  return gulp
    .src("./source/css/style.pcss")
    .pipe(
@@ -261,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) {
          loadPaths: ["images/"],
        }),
        require("postcss-clean"),
-        postcssPurgecss,
      ])
    )
    .pipe(rename("styles.css"))
@@ -296,7 +248,7 @@ function watch () {
  gulp.watch(
    postcssPaths,
    {useFsEvents: false},
-    gulp.series("tailwind-postcss:build", reloadCSS)
+    gulp.series("tailwind-postcss", reloadCSS)
  );

  console.log("Watching following source files:", jsPaths.concat(postcssPaths));
@@ -341,6 +293,7 @@ gulp.task(
        server: {
          baseDir: resolvePath(paths().public.root),
        },
+        cors: true,
        snippetOptions: {
          // Ignore all HTML files within the templates folder
          blacklist: ["/index.html", "/", "/?*"],
@@ -378,7 +331,8 @@ const buildJSBundle = (env) => {
      exclude: "node_modules/**/*",
      target: {
        chrome: 71,
-        firefox: 64
+        firefox: 64,
+        edge: 19
      },
    }),
    commonjs(),
@@ -425,13 +379,13 @@ gulp.task('rollup:build:production', buildJSBundle("production"));

 gulp.task(
  "site:build",
-  gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build")
+  gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
 );

 gulp.task(
  "site:build:production",
  // Build patternlab first to have all the necessary CSS classes ready for auto purge.
-  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production"))
+  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production"))
 );

 /******************************************************

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "edition-node-gulp",
  "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "1.3.4",
+  "version": "2.20.0",
  "dependencies": {
+    "@fullcalendar/core": "^6.1.5",
+    "@fullcalendar/daygrid": "^6.1.5",
+    "@fullcalendar/interaction": "^6.1.5",
+    "@fullcalendar/multimonth": "^6.1.6",
+    "@fullcalendar/vue": "^6.1.5",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "kind-of": "^6.0.3",
@@ -12,7 +17,8 @@
    "styleguidekit-assets-default": "^3.0.0",
    "styleguidekit-mustache-default": "^3.0.0",
    "tailwindcss-elevation": "^0.3.4",
-    "vue": "^2.6.11",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.7.14",
    "vue2-flip-countdown": "^0.10.0"
  },
  "resolutions": {
@@ -35,8 +41,8 @@
  "scripts": {
    "postinstall": "node scripts/postinstall.js",
    "gulp": "gulp -- ",
-    "develop": "gulp patternlab:serve",
-    "build": "gulp",
+    "develop": "NODE_ENV=development gulp patternlab:serve",
+    "build": "NODE_ENV=production gulp",
    "make-version": "scripts/make-version.sh",
    "update-iconset": "scripts/update-iconset.js"
  },
@@ -53,10 +59,11 @@
    "@rollup/stream": "^1.0.0",
    "acorn": "^6.4.1",
    "autoprefixer": "^9.5.1",
+    "chart.js": "^4.2.0",
    "color": "^3.1.2",
    "gulp-add-src": "^1.0.0",
    "gulp-concat": "^2.6.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "lodash": "^4.17.15",
    "postcss-assets": "^5.0.0",
@@ -69,10 +76,10 @@
    "rollup-plugin-terser": "^6.1.0",
    "rollup-plugin-vue": "^5.1.9",
    "tailwind-css-variables": "^2.0.3",
-    "tailwindcss": "^1.4.6",
-    "tailwindcss-typography": "^3.1.0",
+    "tailwindcss": "^3.3.3",
+    "@tailwindcss/typography": "^0.5.10",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.14"
  }
 }
--- a/patternlab-config.json
+++ b/patternlab-config.json
--- a/scripts/postinstall.js
+++ b/scripts/postinstall.js
--- a/source/_annotations/annotations.js
+++ b/source/_annotations/annotations.js
--- a/source/_data/data.json
+++ b/source/_data/data.json
@@ -4,27 +4,27 @@
  "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
  "img": {
    "avatar": {
-      "src": "http://placeimg.com/100/100/people",
+      "src": "https://picsum.photos/100",
      "alt": "Avatar"
    },
    "square": {
-      "src": "http://placeimg.com/300/300/nature",
+      "src": "https://picsum.photos/300",
      "alt": "Square"
    },
    "rectangle": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
      "alt": "Rectangle"
    },
    "landscape-4x3": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
      "alt": "4x3 Image"
    },
    "landscape-16x9": {
-      "src": "http://placeimg.com/640/360/tech",
+      "src": "https://picsum.photos/640/360",
      "alt": "16x9 Image"
    },
    "landscape-16x9-fullhd": {
-      "src": "https://loremflickr.com/1920/1080",
+      "src": "https://picsum.photos/1920/1080",
      "alt": "16x9 Image Full HD"
    }
  },
@@ -32,6 +32,9 @@
    "short": "Lorizzle pimpin' dolizzle sit amet I",
    "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
  },
+  "list": {
+    "item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
+  },
  "excerpt": {
    "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
    "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
@@ -49,10 +52,11 @@
    "last": "Koolen",
    "lasti": "K",
    "occupation": "Software company manager and open-source software expert",
-    "email": "example@example.com",
+    "email": "someone.from.the.party@pirati.cz",
    "claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
    "party": "Pirátská strana",
    "age": "30",
+    "city": "Valašské Meziříčí",
    "position": "1"
  },
  "organization": {
@@ -93,6 +97,11 @@
    "short": "20"
  },
  "seconds": "31",
+  "form": {
+    "label": "Název políčka",
+    "placeholder": "Placeholder"
+  },
+  "calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
  "greyColors": [
    {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
    {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
@@ -113,11 +122,27 @@
        {"cls": "white", "name": "White", "hex": "#ffffff"}
      ]
    },
+    {
+      "name": "Olive",
+      "variants": [
+        {"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
+      ]
+    },
    {
      "name": "Green",
      "variants": [
-        {"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
-        {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
+        {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
+        {"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
+        {"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
+      ]
+    },
+    {
+      "name": "Yellow",
+      "variants": [
+        {"cls": "yellow-100", "name": "Yellow 100", "hex": "#fff7bf"},
+        {"cls": "yellow-200", "name": "Yellow 200", "hex": "#f7f38a"},
+        {"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
+        {"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
      ]
    },
    {
@@ -155,6 +180,18 @@
        {"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
        {"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
      ]
+    },
+    {
+      "name": "Red",
+      "variants": [
+        {"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
+      ]
+    },
+    {
+      "name": "Pirati",
+      "variants": [
+        {"cls": "pirati-yellow", "name": "Yellow", "hex": "#fec934"}
+      ]
    }
  ]
 }
--- a/source/_data/listitems.json
+++ b/source/_data/listitems.json
--- a/source/_meta/_00-head.mustache
+++ b/source/_meta/_00-head.mustache
--- a/source/_meta/_01-foot.mustache
+++ b/source/_meta/_01-foot.mustache
--- a/source/_patterns/.gitkeep
+++ b/source/_patterns/.gitkeep
--- a/source/_patterns/00-atoms/01-text/text-shadow.mustache
+++ b/source/_patterns/00-atoms/01-text/text-shadow.mustache
+<div>
+  <h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
+</div>
--- a/source/_patterns/00-atoms/02-icons/icons.mustache
+++ b/source/_patterns/00-atoms/02-icons/icons.mustache
 <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">
  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--strategy"></i>
+      <i class="ico--glass"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--strategy</code>
+      <code>.ico--glass</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--pig"></i>
+      <i class="ico--checkmark"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--pig</code>
+      <code>.ico--checkmark</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--thermometer"></i>
+      <i class="ico--info"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--thermometer</code>
+      <code>.ico--info</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--pirati"></i>
+      <i class="ico--question"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--pirati</code>
+      <code>.ico--question</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--stackshare"></i>
+      <i class="ico--warning"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--stackshare</code>
+      <code>.ico--warning</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--open-source"></i>
+      <i class="ico--code"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--open-source</code>
+      <code>.ico--code</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--search"></i>
+      <i class="ico--checkbox-unchecked"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--search</code>
+      <code>.ico--checkbox-unchecked</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--cross"></i>
+      <i class="ico--star-full"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--cross</code>
+      <code>.ico--star-full</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--checkbox-checked"></i>
+      <i class="ico--star-empty"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--checkbox-checked</code>
+      <code>.ico--star-empty</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--quill"></i>
+      <i class="ico--bookmark"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--quill</code>
+      <code>.ico--bookmark</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--feather"></i>
+      <i class="ico--cog"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--feather</code>
+      <code>.ico--cog</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--write"></i>
+      <i class="ico--key"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--write</code>
+      <code>.ico--key</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--edit"></i>
+      <i class="ico--zoom-in"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--edit</code>
+      <code>.ico--zoom-in</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--sphere"></i>
+      <i class="ico--zoom-out"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--sphere</code>
+      <code>.ico--zoom-out</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--globe"></i>
+      <i class="ico--shrink"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--globe</code>
+      <code>.ico--shrink</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--internet"></i>
+      <i class="ico--printer"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--internet</code>
+      <code>.ico--printer</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--wikipedia"></i>
+      <i class="ico--user"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--wikipedia</code>
+      <code>.ico--user</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--brand"></i>
+      <i class="ico--file-openoffice"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--brand</code>
+      <code>.ico--file-openoffice</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--youtube"></i>
+      <i class="ico--file-excel"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--youtube</code>
+      <code>.ico--file-excel</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--users"></i>
+      <i class="ico--file-word"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--users</code>
+      <code>.ico--file-word</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--group"></i>
+      <i class="ico--file-pdf"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--group</code>
+      <code>.ico--file-pdf</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--team"></i>
+      <i class="ico--file-picture"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--team</code>
+      <code>.ico--file-picture</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--members"></i>
+      <i class="ico--file-text2"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--members</code>
+      <code>.ico--file-text2</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--community"></i>
+      <i class="ico--file-blank"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--community</code>
+      <code>.ico--file-blank</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--collaborate"></i>
+      <i class="ico--folder-upload"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--collaborate</code>
+      <code>.ico--folder-upload</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--book"></i>
+      <i class="ico--upload"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--book</code>
+      <code>.ico--upload</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--read"></i>
+      <i class="ico--cloud-upload"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--read</code>
+      <code>.ico--cloud-upload</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--reading"></i>
+      <i class="ico--folder-download"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--reading</code>
+      <code>.ico--folder-download</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--download"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--download</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--cloud-download"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--cloud-download</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--alarm"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--alarm</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--calculator"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--calculator</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--facebook-full"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--facebook-full</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--feed"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--feed</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--library"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--library</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--office"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--office</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--attachment"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--attachment</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--enlarge"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--enlarge</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--eye-off"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--eye-off</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--eye"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--eye</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--share"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--share</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--search"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--search</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--pencil"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--pencil</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--lock-open"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--lock-open</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--lock"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--lock</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--equalizer"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--equalizer</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--switch"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--switch</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--loop"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--loop</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--refresh"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--refresh</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--bullhorn"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--bullhorn</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--bin"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--bin</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--cross"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--cross</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--checkbox-checked"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--checkbox-checked</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--globe"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--globe</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--wikipedia"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--wikipedia</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--youtube"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--youtube</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--users"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--users</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--book"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--book</code>
    </div>
  </div>

@@ -413,6 +683,15 @@
    </div>
  </div>

+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--rocket"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--rocket</code>
+    </div>
+  </div>
+
  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
      <i class="ico--location"></i>
@@ -442,118 +721,244 @@

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--github1"></i>
+      <i class="ico--facebook"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--github1</code>
+      <code>.ico--facebook</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--gplus"></i>
+      <i class="ico--food"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--gplus</code>
+      <code>.ico--food</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--twitter1"></i>
+      <i class="ico--dots-three-vertical"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--twitter1</code>
+      <code>.ico--dots-three-vertical</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--facebook"></i>
+      <i class="ico--dots-three-horizontal"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--facebook</code>
+      <code>.ico--dots-three-horizontal</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--menu"></i>
+      <i class="ico--log-out"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--menu</code>
+      <code>.ico--log-out</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-right"></i>
+      <i class="ico--envelope"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-right</code>
+      <code>.ico--envelope</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-left"></i>
+      <i class="ico--pin"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-left</code>
+      <code>.ico--pin</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-down"></i>
+      <i class="ico--at"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-down</code>
+      <code>.ico--at</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--chevron-up"></i>
+      <i class="ico--bed"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--chevron-up</code>
+      <code>.ico--bed</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--train"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--train</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--bus"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--bus</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--wheelchair"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--wheelchair</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--thumbs-down"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--thumbs-down</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--thumbs-up"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--thumbs-up</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--anchor"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--anchor</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--paw"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--paw</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--strategy"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--strategy</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--pig"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--pig</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--donation-outline"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--donation-outline</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--donation-full"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--donation-full</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--thermometer"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--thermometer</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--menu"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--menu</code>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+      <i class="ico--chevron-right"></i>
+    </div>
+    <div class="card__body p-2 text-2xs">
+      <code>.ico--chevron-right</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--zoom_out_map"></i>
+      <i class="ico--chevron-left"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--zoom_out_map</code>
+      <code>.ico--chevron-left</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--arrow-down"></i>
+      <i class="ico--chevron-down"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--arrow-down</code>
+      <code>.ico--chevron-down</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--link1"></i>
+      <i class="ico--chevron-up"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--link1</code>
+      <code>.ico--chevron-up</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--city"></i>
+      <i class="ico--link-horizontal"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--city</code>
+      <code>.ico--link-horizontal</code>
    </div>
  </div>

@@ -568,99 +973,100 @@

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--edit-pencil"></i>
+      <i class="ico--pirati"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--edit-pencil</code>
+      <code>.ico--pirati</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--at"></i>
+      <i class="ico--jitsi"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--at</code>
+      <code>.ico--jitsi</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--tasks"></i>
+      <i class="ico--forum"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--tasks</code>
+      <code>.ico--forum</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--calculator"></i>
+      <i class="ico--helios"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--calculator</code>
+      <code>.ico--helios</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--bank"></i>
+      <i class="ico--redmine"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--bank</code>
+      <code>.ico--redmine</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--facebook-official"></i>
+      <i class="ico--zulip"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--facebook-official</code>
+      <code>.ico--zulip</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--close"></i>
+      <i class="ico--mastodon"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--close</code>
+      <code>.ico--mastodon</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--anchor"></i>
+      <i class="ico--open-source"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--anchor</code>
+      <code>.ico--open-source</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--feed"></i>
+      <i class="ico--price-tag"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--feed</code>
+      <code>.ico--price-tag</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--paw"></i>
+      <i class="ico--price-tags"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--paw</code>
+      <code>.ico--price-tags</code>
    </div>
  </div>

  <div class="card">
    <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
-    <i class="ico--envelope"></i>
+      <i class="ico--stats-dots"></i>
    </div>
    <div class="card__body p-2 text-2xs">
-    <code>.ico--envelope</code>
+      <code>.ico--stats-dots</code>
+    </div>
+  </div>
 </div>
-</div></div>
\ No newline at end of file
--- a/source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
+++ b/source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
-<button class="btn {{ classes }}">
+<button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
  <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
 </button>
--- a/source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
+++ b/source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
-<button class="btn btn--icon {{ classes }}">
+<button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
  <div class="btn__body-wrap">
    <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
    <div class="btn__icon {{ iconClasses }}">

--- a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+++ b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
@@ -7,10 +7,27 @@
    {{> atoms-basic-button(classes: "btn--white") }}
    {{> atoms-basic-button(classes: "btn--blue-300") }}
    {{> atoms-basic-button(classes: "btn--cyan-200") }}
-    {{> atoms-basic-button(classes: "btn--green-200") }}
+    {{> atoms-basic-button(classes: "btn--green-400") }}
+    {{> atoms-basic-button(classes: "btn--green-300") }}
    {{> atoms-basic-button(classes: "btn--orange-300") }}
    {{> atoms-basic-button(classes: "btn--violet-400") }}
    {{> atoms-basic-button(classes: "btn--violet-500") }}
+    {{> atoms-basic-button(classes: "btn--red-600") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-button(classes: "btn--black", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--white", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
  </div>
  <div class="inline-flex flex-col space-y-2">
    {{> atoms-icon-button(classes: "btn--black") }}
@@ -20,9 +37,26 @@
    {{> atoms-icon-button(classes: "btn--white") }}
    {{> atoms-icon-button(classes: "btn--blue-300") }}
    {{> atoms-icon-button(classes: "btn--cyan-200") }}
-    {{> atoms-icon-button(classes: "btn--green-200") }}
+    {{> atoms-icon-button(classes: "btn--green-400") }}
+    {{> atoms-icon-button(classes: "btn--green-300") }}
    {{> atoms-icon-button(classes: "btn--orange-300") }}
    {{> atoms-icon-button(classes: "btn--violet-400") }}
    {{> atoms-icon-button(classes: "btn--violet-500") }}
+    {{> atoms-icon-button(classes: "btn--red-600") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-icon-button(classes: "btn--black", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--white", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
  </div>
 </div>
--- a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+++ b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
@@ -7,7 +7,8 @@
    {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
@@ -20,7 +21,8 @@
    {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
No results found