From b5c9646131ae56748608b8ee25947d184d5caaaf Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sat, 7 May 2022 13:37:45 +0100
Subject: [PATCH 01/16] Remove map

---
 dist/themes/arya-blue.css.map | 1 -
 dist/themes/saga-blue.css.map | 1 -
 dist/themes/vela-blue.css.map | 1 -
 3 files changed, 3 deletions(-)
 delete mode 100644 dist/themes/arya-blue.css.map
 delete mode 100644 dist/themes/saga-blue.css.map
 delete mode 100644 dist/themes/vela-blue.css.map

diff --git a/dist/themes/arya-blue.css.map b/dist/themes/arya-blue.css.map
deleted file mode 100644
index 6e50f49..0000000
--- a/dist/themes/arya-blue.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../_sass/lib/themes/arya-blue.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"arya-blue.css"}
\ No newline at end of file
diff --git a/dist/themes/saga-blue.css.map b/dist/themes/saga-blue.css.map
deleted file mode 100644
index 2268681..0000000
--- a/dist/themes/saga-blue.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../_sass/lib/themes/saga-blue.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"saga-blue.css"}
\ No newline at end of file
diff --git a/dist/themes/vela-blue.css.map b/dist/themes/vela-blue.css.map
deleted file mode 100644
index 0bcb02c..0000000
--- a/dist/themes/vela-blue.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../_sass/lib/themes/vela-blue.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"vela-blue.css"}
\ No newline at end of file

From 49b6fe32c1297c214519c5a3900118936e800f29 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sat, 7 May 2022 13:53:01 +0100
Subject: [PATCH 02/16] Update CHANGELOG.md

---
 CHANGELOG.md | 130 ++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 109 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6b5206..a3466f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,54 +1,142 @@
 # Changelog
 
+## [3.2.0](https://github.com/primefaces/primeflex/tree/3.2.0) (2022-05-07)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.3...3.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- Primary and Red Color Palette [\#113](https://github.com/primefaces/primeflex/issues/113)
+- Add gap, row-gap and column-gap classes [\#115](https://github.com/primefaces/primeflex/issues/115)
+- Container - Container-fluid Class \(proposal\) [\#46](https://github.com/primefaces/primeflex/issues/46)
+- Add rem and direction options to border-radius classes [\#121](https://github.com/primefaces/primeflex/issues/121)
+- Add text-color and text-color-secondary classes to use text color variables of Prime UI themes [\#120](https://github.com/primefaces/primeflex/issues/120)
+- Add rem options to max-w\* and max-h\* classes [\#119](https://github.com/primefaces/primeflex/issues/119)
+- Add focus, hover and active states to shadow classes [\#118](https://github.com/primefaces/primeflex/issues/118)
+- Add focus, hover and active states to text-decoration classes [\#117](https://github.com/primefaces/primeflex/issues/117)
+- Add vertical alignment classes [\#116](https://github.com/primefaces/primeflex/issues/116)
+- Add $prefix variable to not conflict with other libraries like Tailwind [\#110](https://github.com/primefaces/primeflex/issues/110)
+- Missing responsive styles for col and col-fixed classes [\#82](https://github.com/primefaces/primeflex/issues/82)
+
+**Fixed bugs:**
+
+- Breakpoints variable cannot be overriden [\#111](https://github.com/primefaces/primeflex/issues/111)
+
 ## [3.1.3](https://github.com/primefaces/primeflex/tree/3.1.3) (2022-02-18)
 
-[Full Changelog](https://github.com/primefaces/primevue/compare/3.1.2...3.1.3)
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.2...3.1.3)
 
 **Fixed bugs:**
 
-- Surface colors might be overridden [\#100](https://github.com/primefaces/primevue/issues/100)
-- surface-hover uses border-color not bg-color [\#101](https://github.com/primefaces/primevue/issues/101)
-- widths may not be overridden responsively [\#102](https://github.com/primefaces/primevue/issues/102)
+- widths may not be overridden responsively [\#102](https://github.com/primefaces/primeflex/issues/102)
+- surface-hover uses border-color not bg-color [\#101](https://github.com/primefaces/primeflex/issues/101)
+- Surface colors might be overridden [\#100](https://github.com/primefaces/primeflex/issues/100)
 
 ## [3.1.2](https://github.com/primefaces/primeflex/tree/3.1.2) (2021-12-16)
 
-[Full Changelog](https://github.com/primefaces/primevue/compare/3.1.1...3.1.2)
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.1...3.1.2)
 
 **Fixed bugs:**
 
-- primeflex.scss is missing in primeflex 3.1.1 [\#90](https://github.com/primefaces/primevue/issues/90)
+- primeflex.scss is missing in primeflex 3.1.1 [\#90](https://github.com/primefaces/primeflex/issues/90)
 
 ## [3.1.1](https://github.com/primefaces/primeflex/tree/3.1.1) (2021-12-15)
 
-[Full Changelog](https://github.com/primefaces/primevue/compare/3.1.0...3.1.1)
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.0...3.1.1)
 
 **Fixed bugs:**
 
-- Deprecation Warnings for Dart Sass [\#81](https://github.com/primefaces/primevue/issues/81)
+- Deprecation Warnings for Dart Sass [\#81](https://github.com/primefaces/primeflex/issues/81)
 
-## [3.1.0](https://github.com/primefaces/primeflex/tree/3.0.1) (2021-10-18)
+## [3.1.0](https://github.com/primefaces/primeflex/tree/3.1.0) (2021-10-18)
 
-[Full Changelog](https://github.com/primefaces/primevue/compare/3.0.1...3.1.0)
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.0.1...3.1.0)
 
 **Implemented New Features and Enhancements:**
 
-- feat: more colors customization [\#62](https://github.com/primefaces/primevue/issues/62)
-- Add text overflow classes [\#78](https://github.com/primefaces/primevue/issues/78)
-- RGBA colors for black and white [\#77](https://github.com/primefaces/primevue/issues/77)
-- Negative Margins [\#76](https://github.com/primefaces/primevue/issues/76)
-- primeflex.css.map error [\#72](https://github.com/primefaces/primevue/issues/72)
-- Explicitly State The licence this is under [\#75](https://github.com/primefaces/primevue/issues/75)
+- Add text overflow classes [\#78](https://github.com/primefaces/primeflex/issues/78)
+- RGBA colors for black and white [\#77](https://github.com/primefaces/primeflex/issues/77)
+- Negative Margins [\#76](https://github.com/primefaces/primeflex/issues/76)
+- Explicitly State The licence this is under [\#75](https://github.com/primefaces/primeflex/issues/75)
+- feat: more colors customization [\#62](https://github.com/primefaces/primeflex/issues/62)
 
 **Fixed bugs:**
 
-- Document named surface-* classes [\#80](https://github.com/primefaces/primevue/issues/80)
-- Reuse Classes not working [\#68](https://github.com/primefaces/primevue/issues/68)
-- Opacity on fadeout animations is incorrect [\#71](https://github.com/primefaces/primevue/issues/71)
+- Document named surface-\* classes [\#80](https://github.com/primefaces/primeflex/issues/80)
+- Opacity on fadeout animations is incorrect [\#71](https://github.com/primefaces/primeflex/issues/71)
+- Reuse Classes not working [\#68](https://github.com/primefaces/primeflex/issues/68)
 
 ## [3.0.1](https://github.com/primefaces/primeflex/tree/3.0.1) (2021-07-29)
 
-[Full Changelog](https://github.com/primefaces/primevue/compare/3.0.0...3.0.1)
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.0.0...3.0.1)
+
+**Fixed bugs:**
+
+- Add sources to distribution [\#79](https://github.com/primefaces/primeflex/issues/79)
+
+## [3.0.0](https://github.com/primefaces/primeflex/tree/3.0.0) (2021-07-14)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/2.0.0...3.0.0)
+
+## [2.0.0](https://github.com/primefaces/primeflex/tree/2.0.0) (2020-08-26)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/2.0.0-rc.1...2.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Deprecate Grid CSS flex props in favor of FlexBox [\#32](https://github.com/primefaces/primeflex/issues/32)
+- .src folder seems to be exlcuded in node module  [\#23](https://github.com/primefaces/primeflex/issues/23)
+
+**Fixed bugs:**
+
+- Missing padding-top-bottom inside .p-field.p-grid [\#29](https://github.com/primefaces/primeflex/issues/29)
+
+## [2.0.0-rc.1](https://github.com/primefaces/primeflex/tree/2.0.0-rc.1) (2020-07-03)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.3.1...2.0.0-rc.1)
+
+## [1.3.1](https://github.com/primefaces/primeflex/tree/1.3.1) (2020-06-26)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.3.0...1.3.1)
+
+## [1.3.0](https://github.com/primefaces/primeflex/tree/1.3.0) (2020-06-18)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.2.0...1.3.0)
+
+## [1.2.0](https://github.com/primefaces/primeflex/tree/1.2.0) (2020-06-16)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.1.1...1.2.0)
+
+## [1.1.1](https://github.com/primefaces/primeflex/tree/1.1.1) (2020-05-28)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.1.0...1.1.1)
 
 **Implemented New Features and Enhancements:**
 
-- Add sources to distribution  [\#73](https://github.com/primefaces/primevue/issues/73)
\ No newline at end of file
+- Narrow down the scope of field label [\#21](https://github.com/primefaces/primeflex/issues/21)
+
+## [1.1.0](https://github.com/primefaces/primeflex/tree/1.1.0) (2020-05-07)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.0.0...1.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add form layout utility [\#19](https://github.com/primefaces/primeflex/issues/19)
+
+## [1.0.0](https://github.com/primefaces/primeflex/tree/1.0.0) (2019-10-15)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/1.0.0-rc.1...1.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add p-\*-order-\* class to all breakpoints [\#15](https://github.com/primefaces/primeflex/issues/15)
+- Add row direction class [\#14](https://github.com/primefaces/primeflex/issues/14)
+
+**Fixed bugs:**
+
+- Doesn't work with basic usage \(includes used workaround\) [\#8](https://github.com/primefaces/primeflex/issues/8)
+- "p-dir-col" not properly rendered in IE11 [\#2](https://github.com/primefaces/primeflex/issues/2)
+
+## [1.0.0-rc.1](https://github.com/primefaces/primeflex/tree/1.0.0-rc.1) (2018-09-01)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/8ec29b3fa3861ca4debc71aad07201af27e8c5a3...1.0.0-rc.1)
\ No newline at end of file

From b4cf18f53c14d8762fba7b50e56467d1f4c3d734 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sat, 7 May 2022 14:28:10 +0100
Subject: [PATCH 03/16] new iteration

---
 dist/package.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/package.json b/dist/package.json
index 2dfb5b0..92fe55c 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeflex",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.",
     "repository": {
       "type": "git",
diff --git a/package.json b/package.json
index ac77667..979801a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primeflex",
-  "version": "3.2.0",
+  "version": "3.2.1-SNAPSHOT",
   "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.",
   "scripts": {
     "serve": "jekyll serve --livereload",

From 796849d929713842c97ec917ab078e96f0a32401 Mon Sep 17 00:00:00 2001
From: Daniel M <inad9300@gmail.com>
Date: Mon, 9 May 2022 14:58:11 +0200
Subject: [PATCH 04/16] Fix typo

---
 pages/animation/animations.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/animation/animations.html b/pages/animation/animations.html
index 128fb5a..f845f67 100644
--- a/pages/animation/animations.html
+++ b/pages/animation/animations.html
@@ -1,7 +1,7 @@
 ---
 layout: layout
 permalink: /animations
-title: Animaitons
+title: Animations
 ---
 
 <div>

From cbcf7a5d628d44fce8402611eb022c10136fd142 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 30 May 2022 11:42:45 +0100
Subject: [PATCH 05/16] Fixed #91 - SassError: Expected identifier

---
 _sass/lib/src/_colors.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/_sass/lib/src/_colors.scss b/_sass/lib/src/_colors.scss
index e0d442e..4aeec27 100644
--- a/_sass/lib/src/_colors.scss
+++ b/_sass/lib/src/_colors.scss
@@ -1,4 +1,4 @@
-$colors: 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary' !default;
+$themeColors: 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray', 'red', 'primary' !default;
 $colorShades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
 $surfaceShades: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
 $rgbaShades: 10, 20, 30, 40, 50, 60, 70, 80, 90;
@@ -8,9 +8,9 @@ $rgbaShades: 10, 20, 30, 40, 50, 60, 70, 80, 90;
 @include surface-class('border', 'border-color', $surfaceShades);
 @include style-class('background-color', (bg-transparent:'transparent'), true);
 @include style-class('border-color', (border-transparent:'transparent'), true);
-@include color-class('text-', 'color', $colors, $colorShades);
-@include color-class('bg-', 'background-color', $colors, $colorShades);
-@include color-class('border-', 'border-color', $colors, $colorShades);
+@include color-class('text-', 'color', $themeColors, $colorShades);
+@include color-class('bg-', 'background-color', $themeColors, $colorShades);
+@include color-class('border-', 'border-color', $themeColors, $colorShades);
 @include rgba-color-class('bg-', 'background-color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades);
 @include rgba-color-class('border-', 'border-color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades);
 @include rgba-color-class('text-', 'color', ('white': '255,255,255', 'black': '0,0,0'), $rgbaShades);

From d88316915b1da88726a5ca17346f46241c92e4ee Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 30 May 2022 11:47:38 +0100
Subject: [PATCH 06/16] set version

---
 CHANGELOG.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3466f8..db7f51e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [3.2.1](https://github.com/primefaces/primeflex/tree/3.2.1) (2022-05-30)
+
+[Full Changelog](https://github.com/primefaces/primeflex/compare/3.2.0...3.2.1)
+
+**Fixed bugs:**
+
+- SassError: Expected identifier [\#91](https://github.com/primefaces/primeflex/issues/91)
+
 ## [3.2.0](https://github.com/primefaces/primeflex/tree/3.2.0) (2022-05-07)
 
 [Full Changelog](https://github.com/primefaces/primeflex/compare/3.1.3...3.2.0)
diff --git a/package.json b/package.json
index 979801a..136d69c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primeflex",
-  "version": "3.2.1-SNAPSHOT",
+  "version": "3.2.1",
   "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.",
   "scripts": {
     "serve": "jekyll serve --livereload",

From 793bb53574b3de69c3565aabc09b0eb093d65855 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 30 May 2022 11:50:14 +0100
Subject: [PATCH 07/16] remove sourcemaps from themes

---
 dist/themes/arya-blue.css | 2 --
 dist/themes/saga-blue.css | 2 --
 dist/themes/vela-blue.css | 2 --
 3 files changed, 6 deletions(-)

diff --git a/dist/themes/arya-blue.css b/dist/themes/arya-blue.css
index 8d78f26..748ba0b 100644
--- a/dist/themes/arya-blue.css
+++ b/dist/themes/arya-blue.css
@@ -157,5 +157,3 @@
   --primary-800:#daedfd;
   --primary-900:#f7fbff;
 }
-
-/*# sourceMappingURL=arya-blue.css.map */
diff --git a/dist/themes/saga-blue.css b/dist/themes/saga-blue.css
index 2205abb..dfd83ee 100644
--- a/dist/themes/saga-blue.css
+++ b/dist/themes/saga-blue.css
@@ -157,5 +157,3 @@
   --primary-800:#125386;
   --primary-900:#0d3c61;
 }
-
-/*# sourceMappingURL=saga-blue.css.map */
diff --git a/dist/themes/vela-blue.css b/dist/themes/vela-blue.css
index f989473..6978733 100644
--- a/dist/themes/vela-blue.css
+++ b/dist/themes/vela-blue.css
@@ -157,5 +157,3 @@
   --primary-800:#376487;
   --primary-900:#284862;
 }
-
-/*# sourceMappingURL=vela-blue.css.map */

From eb9aafcafa6b41cc8298938a7e8d40d6f04a6cf7 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 30 May 2022 11:52:19 +0100
Subject: [PATCH 08/16] set new version

---
 dist/package.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/package.json b/dist/package.json
index 92fe55c..477e119 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeflex",
-    "version": "3.2.1",
+    "version": "3.2.2",
     "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.",
     "repository": {
       "type": "git",
diff --git a/package.json b/package.json
index 136d69c..2b0fc02 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primeflex",
-  "version": "3.2.1",
+  "version": "3.2.2-SNAPSHOT",
   "description": "PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.",
   "scripts": {
     "serve": "jekyll serve --livereload",

From 95c7f7b7634c0f876da46b05d279f0546413b4d5 Mon Sep 17 00:00:00 2001
From: Andreas Gnyp <andreas@gnyp.de>
Date: Sun, 10 Jul 2022 21:37:55 +0200
Subject: [PATCH 09/16] Update setup.html

Change link-URL to newest version in setup.html.
(This threw me off, in the sense me believing of having the newest version installed.)
---
 pages/setup.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/setup.html b/pages/setup.html
index 511507b..cc91c86 100644
--- a/pages/setup.html
+++ b/pages/setup.html
@@ -24,7 +24,7 @@ <h5>Module Loader</h5>
     <h5>Load from CDN</h5>
     <p>PrimeFlex can also be loaded from a CDN using a link tag.</p>
     <pre><code class="language-markup">
-&lt;link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.css"&gt;
+&lt;link rel="stylesheet" href="https://unpkg.com/primeflex@3.2.1/primeflex.css"&gt;
             
 </code></pre>
 

From 7b685f39cf74b7839d64fc0d16acd3baa97fa175 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 11 Jul 2022 07:43:32 -0400
Subject: [PATCH 10/16] Add NPM and License badges

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9b95a7e..a18c021 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/primeflex.svg)](https://badge.fury.io/js/primeflex)
+
 # PrimeFlex
 PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.
 
 See [PrimeFlex homepage](http://www.primefaces.org/primeflex) for live showcase and documentation.
 
-![alt text](http://www.primefaces.org/images/primeflex.jpg "PrimeFlex")
\ No newline at end of file
+![alt text](http://www.primefaces.org/images/primeflex.jpg "PrimeFlex")

From f48d66a203c872a34411604b76544261b361abd2 Mon Sep 17 00:00:00 2001
From: Victorien Plot <victorien@maykinmedia.nl>
Date: Fri, 29 Jul 2022 12:17:16 +0200
Subject: [PATCH 11/16] Fix typo in layout docs

---
 pages/layout/display.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/layout/display.html b/pages/layout/display.html
index 074225c..af9c29f 100644
--- a/pages/layout/display.html
+++ b/pages/layout/display.html
@@ -150,7 +150,7 @@ <h5>Flex</h5>
 </code></pre>
 
     <h5>Inline Flex</h5>
-    <p>Displays the element as an inline level flex container..</p>
+    <p>Displays the element as an inline level flex container.</p>
     <div class="card">
         <div class="inline-flex card-container orange-container">
             <div class="flex-1 h-4rem bg-orange-500 text-white font-bold text-center p-4 border-round">1</div>

From 5269e560959ed78ce577a86321e260e6aa221a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Tue, 25 Oct 2022 17:16:37 +0300
Subject: [PATCH 12/16] Fixed #140 - Add new animation classes

---
 _sass/lib/src/_animation.scss | 152 ++++++++++++++++++++++++++++++++++
 _sass/lib/src/_variables.scss |   2 +-
 2 files changed, 153 insertions(+), 1 deletion(-)

diff --git a/_sass/lib/src/_animation.scss b/_sass/lib/src/_animation.scss
index a471e24..58ad284 100644
--- a/_sass/lib/src/_animation.scss
+++ b/_sass/lib/src/_animation.scss
@@ -151,6 +151,118 @@
   }
 }
 
+@keyframes flip {
+    from {
+        transform: perspective($animationPerspective) rotateX(-100deg);
+    }
+
+    to {
+        transform: perspective($animationPerspective) rotateX(0);
+    }
+}
+
+@keyframes flipleft {
+    from {
+        transform: perspective($animationPerspective) rotateY(-100deg);
+        opacity: 0;
+    }
+
+    to {
+        transform: perspective($animationPerspective) rotateY(0)
+    }
+}
+
+@keyframes flipright {
+    from {
+        transform: perspective($animationPerspective) rotateY(100deg);
+        opacity: 0;
+    }
+
+    to {
+        transform: perspective($animationPerspective) rotateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes flipup {
+    from {
+        transform: perspective($animationPerspective) rotateX(-100deg);
+        opacity: 0;
+    }
+
+    to {
+        transform: perspective($animationPerspective) rotateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes zoomin {
+    from {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomindown {
+    from {
+        opacity: 0;
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoominleft {
+    from {
+        opacity: 0;
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoominright {
+    from {
+        opacity: 0;
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoominup {
+    from {
+        opacity: 0;
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
 .#{$prefix}fadein {
   animation: fadein .15s linear;
 }
@@ -207,6 +319,46 @@
   animation: animate-width 1000ms linear;
 }
 
+.#{$prefix}flip {
+    backface-visibility: visible;
+    animation: flip .15s linear;
+}
+
+.#{$prefix}flipup {
+    backface-visibility: visible;
+    animation: flipup .15s linear;
+}
+
+.#{$prefix}flipleft {
+    backface-visibility: visible;
+    animation: flipleft .15s linear;
+}
+
+.#{$prefix}flipright {
+    backface-visibility: visible;
+    animation: flipright .15s linear;
+}
+
+.#{$prefix}zoomin {
+    animation: zoomin .15s linear;
+}
+
+.#{$prefix}zoomindown {
+    animation: zoomindown .15s linear;
+}
+
+.#{$prefix}zoominleft {
+    animation: zoominleft .15s linear;
+}
+
+.#{$prefix}zoominright {
+    animation: zoominright .15s linear;
+}
+
+.#{$prefix}zoominup {
+    animation: zoominup .15s linear;
+}
+
 $animation-duration-props: (
   'animation-duration-100': '100ms',
   'animation-duration-150': '150ms',
diff --git a/_sass/lib/src/_variables.scss b/_sass/lib/src/_variables.scss
index 1a4260e..79cee7b 100644
--- a/_sass/lib/src/_variables.scss
+++ b/_sass/lib/src/_variables.scss
@@ -10,7 +10,7 @@ $gutter: .5rem !default;
 $fieldMargin: 1rem !default;
 $fieldLabelMargin: .5rem !default;
 $helperTextMargin: .25rem !default;
-
+$animationPerspective: 2500px !default;
 $spacer: 1rem !default;
 
 $breakpoints: (

From 0c2f7c52115be5cf7be054f6c1b45b401d678bf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 26 Oct 2022 12:55:34 +0300
Subject: [PATCH 13/16] Refactor

---
 _sass/lib/src/_variables.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_sass/lib/src/_variables.scss b/_sass/lib/src/_variables.scss
index 79cee7b..d2876b3 100644
--- a/_sass/lib/src/_variables.scss
+++ b/_sass/lib/src/_variables.scss
@@ -10,7 +10,8 @@ $gutter: .5rem !default;
 $fieldMargin: 1rem !default;
 $fieldLabelMargin: .5rem !default;
 $helperTextMargin: .25rem !default;
-$animationPerspective: 2500px !default;
+$animationPerspective: 2000px !default;
+
 $spacer: 1rem !default;
 
 $breakpoints: (

From c5af871387f7e06e4e9d241a53e07b48407fade8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 27 Oct 2022 15:31:25 +0300
Subject: [PATCH 14/16] refactor

---
 _sass/lib/src/_animation.scss | 333 +++++++++++++++++-----------------
 _sass/lib/src/_variables.scss |   1 -
 2 files changed, 171 insertions(+), 163 deletions(-)

diff --git a/_sass/lib/src/_animation.scss b/_sass/lib/src/_animation.scss
index 58ad284..613f1dd 100644
--- a/_sass/lib/src/_animation.scss
+++ b/_sass/lib/src/_animation.scss
@@ -1,154 +1,170 @@
+$animationPerspective: 2000px !default;
+
 @keyframes fadein {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
 
 @keyframes fadeout {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
 }
 
 @keyframes scalein {
-  0% {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: scaleY(1);
-  }
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
 }
 
 @keyframes slidedown {
-  0% {
-    max-height: 0;
-  }
-  100% {
-    max-height: auto;
-  }
+    0% {
+        max-height: 0;
+    }
+
+    100% {
+        max-height: auto;
+    }
 }
 
 @keyframes slideup {
-  0% {
-    max-height: 1000px;
-  }
-  100% {
-    max-height: 0;
-  }
+    0% {
+        max-height: 1000px;
+    }
+
+    100% {
+        max-height: 0;
+    }
 }
 
 @keyframes fadeinleft {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
+    0% {
+        opacity: 0;
+        transform: translateX(-100%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0%);
+    }
 }
 
 @keyframes fadeoutleft {
-  0% {
-    opacity: 1;
-    transform: translateX(0%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
+    0% {
+        opacity: 1;
+        transform: translateX(0%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
 }
 
 @keyframes fadeinright {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0%);
+    }
 }
 
 @keyframes fadeoutright {
-  0% {
-    opacity: 1;
-    transform: translateX(0%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
+    0% {
+        opacity: 1;
+        transform: translateX(0%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
 }
 
 @keyframes fadeinup {
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
+    0% {
+        opacity: 0;
+        transform: translateY(-100%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0%);
+    }
 }
 
 @keyframes fadeoutup {
-  0% {
-    opacity: 1;
-    transform: translateY(0%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
+    0% {
+        opacity: 1;
+        transform: translateY(0%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
 }
 
 @keyframes fadeindown {
-  0% {
-    opacity: 0;
-    transform: translateY(100%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
+    0% {
+        opacity: 0;
+        transform: translateY(100%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0%);
+    }
 }
 
 @keyframes fadeoutdown {
-  0% {
-    opacity: 1;
-    transform: translateY(0%);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
+    0% {
+        opacity: 1;
+        transform: translateY(0%);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
 }
 
 @keyframes animate-width {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
+    0% {
+        width: 0;
+    }
+
+    100% {
+        width: 100%;
+    }
 }
 
 @keyframes flip {
@@ -168,7 +184,8 @@
     }
 
     to {
-        transform: perspective($animationPerspective) rotateY(0)
+        transform: perspective($animationPerspective) rotateY(0);
+        opacity: 1;
     }
 }
 
@@ -211,13 +228,11 @@
     from {
         opacity: 0;
         transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
     }
 
     60% {
         opacity: 1;
         transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
     }
 }
 
@@ -225,13 +240,11 @@
     from {
         opacity: 0;
         transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
     }
 
     60% {
         opacity: 1;
         transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
     }
 }
 
@@ -239,13 +252,11 @@
     from {
         opacity: 0;
         transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
     }
 
     60% {
         opacity: 1;
         transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
     }
 }
 
@@ -253,70 +264,68 @@
     from {
         opacity: 0;
         transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
     }
 
     60% {
         opacity: 1;
         transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
     }
 }
 
 .#{$prefix}fadein {
-  animation: fadein .15s linear;
+    animation: fadein .15s linear;
 }
 
 .#{$prefix}fadeout {
-  animation: fadeout .15s linear;
+    animation: fadeout .15s linear;
 }
 
 .#{$prefix}slidedown {
-  animation: slidedown .45s ease-in-out;
+    animation: slidedown .45s ease-in-out;
 }
 
 .#{$prefix}slideup {
-  animation: slideup .45s cubic-bezier(0, 1, 0, 1);
+    animation: slideup .45s cubic-bezier(0, 1, 0, 1);
 }
 
 .#{$prefix}scalein {
-  animation: scalein .15s linear;
+    animation: scalein .15s linear;
 }
 
 .#{$prefix}fadeinleft {
-  animation: fadeinleft .15s linear;
+    animation: fadeinleft .15s linear;
 }
 
 .#{$prefix}fadeoutleft {
-  animation: fadeoutleft .15s linear;
+    animation: fadeoutleft .15s linear;
 }
 
 .#{$prefix}fadeinright {
-  animation: fadeinright .15s linear;
+    animation: fadeinright .15s linear;
 }
 
 .#{$prefix}fadeoutright {
-  animation: fadeoutright .15s linear;
+    animation: fadeoutright .15s linear;
 }
 
 .#{$prefix}fadeinup {
-  animation: fadeinup .15s linear;
+    animation: fadeinup .15s linear;
 }
 
 .#{$prefix}fadeoutup {
-  animation: fadeoutup .15s linear;
+    animation: fadeoutup .15s linear;
 }
 
 .#{$prefix}fadeindown {
-  animation: fadeindown .15s linear;
+    animation: fadeindown .15s linear;
 }
 
 .#{$prefix}fadeoutdown {
-  animation: fadeoutdown .15s linear;
+    animation: fadeoutdown .15s linear;
 }
 
 .#{$prefix}animate-width {
-  animation: animate-width 1000ms linear;
+    animation: animate-width 1000ms linear;
 }
 
 .#{$prefix}flip {
@@ -360,49 +369,49 @@
 }
 
 $animation-duration-props: (
-  'animation-duration-100': '100ms',
-  'animation-duration-150': '150ms',
-  'animation-duration-200': '200ms',
-  'animation-duration-300': '300ms',
-  'animation-duration-400': '400ms',
-  'animation-duration-500': '500ms',
-  'animation-duration-1000': '1000ms',
-  'animation-duration-2000': '2000ms',
-  'animation-duration-3000': '3000ms'
+    'animation-duration-100': '100ms',
+    'animation-duration-150': '150ms',
+    'animation-duration-200': '200ms',
+    'animation-duration-300': '300ms',
+    'animation-duration-400': '400ms',
+    'animation-duration-500': '500ms',
+    'animation-duration-1000': '1000ms',
+    'animation-duration-2000': '2000ms',
+    'animation-duration-3000': '3000ms'
 );
 
 $animation-delay-props: (
-  'animation-delay-100': '100ms',
-  'animation-delay-150': '150ms',
-  'animation-delay-200': '200ms',
-  'animation-delay-300': '300ms',
-  'animation-delay-400': '400ms',
-  'animation-delay-500': '500ms',
-  'animation-delay-1000': '1000ms'
+    'animation-delay-100': '100ms',
+    'animation-delay-150': '150ms',
+    'animation-delay-200': '200ms',
+    'animation-delay-300': '300ms',
+    'animation-delay-400': '400ms',
+    'animation-delay-500': '500ms',
+    'animation-delay-1000': '1000ms'
 );
 
 $animation-iteration-props: (
-  'animation-iteration-1': '1',
-  'animation-iteration-2': '2',
-  'animation-iteration-infinite': 'infinite'
+    'animation-iteration-1': '1',
+    'animation-iteration-2': '2',
+    'animation-iteration-infinite': 'infinite'
 );
 
 $animation-timing-props: (
-  'animation-linear': 'linear',
-  'animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
-  'animation-ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
-  'animation-ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
+    'animation-linear': 'linear',
+    'animation-ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'animation-ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'animation-ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
 );
 
 $animation-fill-props: (
-  'animation-fill-none': 'none',
-  'animation-fill-forwards': 'forwards',
-  'animation-fill-backwards': 'backwards',
-  'animation-fill-both': 'both'
+    'animation-fill-none': 'none',
+    'animation-fill-forwards': 'forwards',
+    'animation-fill-backwards': 'backwards',
+    'animation-fill-both': 'both'
 );
 
 @include style-class('animation-duration', $animation-duration-props);
 @include style-class('animation-delay', $animation-delay-props);
 @include style-class('animation-iteration-count', $animation-iteration-props);
 @include style-class('animation-timing-function', $animation-timing-props);
-@include style-class('animation-fill-mode', $animation-fill-props);
+@include style-class('animation-fill-mode', $animation-fill-props);
\ No newline at end of file
diff --git a/_sass/lib/src/_variables.scss b/_sass/lib/src/_variables.scss
index d2876b3..1a4260e 100644
--- a/_sass/lib/src/_variables.scss
+++ b/_sass/lib/src/_variables.scss
@@ -10,7 +10,6 @@ $gutter: .5rem !default;
 $fieldMargin: 1rem !default;
 $fieldLabelMargin: .5rem !default;
 $helperTextMargin: .25rem !default;
-$animationPerspective: 2000px !default;
 
 $spacer: 1rem !default;
 

From 5f54ca3a57028f97bcb56fe56541b8de61558da4 Mon Sep 17 00:00:00 2001
From: Nikola Tomic <nikolatomic014@gmail.com>
Date: Mon, 7 Nov 2022 12:58:00 +0100
Subject: [PATCH 15/16] surface-100

surface-200 twice instead of surface-100
---
 pages/background/backgroundcolor.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/background/backgroundcolor.html b/pages/background/backgroundcolor.html
index 773ced2..bc5a6a6 100644
--- a/pages/background/backgroundcolor.html
+++ b/pages/background/backgroundcolor.html
@@ -75,9 +75,9 @@ <h5>Classes</h5>
                 <td style="padding: 0"><div class="surface-50 shadow-1" style="width: 50px; height: 20px;"></div></td>
             </tr>
             <tr>
-                <td>surface-200</td>
+                <td>surface-100</td>
                 <td>background-color: var(--surface-100);</td>
-                <td style="padding: 0"><div class="surface-200 shadow-1" style="width: 50px; height: 20px;"></div></td>
+                <td style="padding: 0"><div class="surface-100 shadow-1" style="width: 50px; height: 20px;"></div></td>
             </tr>
             <tr>
                 <td>surface-200</td>

From e6dcfab94c5691cf9c39ec094a71284109f6c7d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Tue, 8 Nov 2022 17:37:31 +0300
Subject: [PATCH 16/16] Update animations demo

---
 pages/animation/animations.html | 159 ++++++++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)

diff --git a/pages/animation/animations.html b/pages/animation/animations.html
index 128fb5a..c9f3418 100644
--- a/pages/animation/animations.html
+++ b/pages/animation/animations.html
@@ -252,6 +252,165 @@ <h5>Classes</h5>
         100% {
             width: 100%;
         }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>flip</td>
+                <td style="white-space: pre" class="p-0">
+    animation: flip .15s linear;
+
+    @keyframes flip {
+        from {
+            transform: perspective($animationPerspective) rotateX(-100deg);
+        }
+    
+        to {
+            transform: perspective($animationPerspective) rotateX(0);
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>flipleft</td>
+                <td style="white-space: pre" class="p-0">
+    animation: flipleft .15s linear;
+
+    @keyframes flipleft {
+        from {
+            transform: perspective($animationPerspective) rotateY(-100deg);
+            opacity: 0;
+        }
+    
+        to {
+            transform: perspective($animationPerspective) rotateY(0);
+            opacity: 1;
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>flipright</td>
+                <td style="white-space: pre" class="p-0">
+    animation: flipright .15s linear;
+
+    @keyframes flipright {
+        from {
+            transform: perspective($animationPerspective) rotateY(100deg);
+            opacity: 0;
+        }
+    
+        to {
+            transform: perspective($animationPerspective) rotateY(0);
+            opacity: 1;
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>flipup</td>
+                <td style="white-space: pre" class="p-0">
+    animation: flipup .15s linear;
+
+    @keyframes flipup {
+        from {
+            transform: perspective($animationPerspective) rotateX(-100deg);
+            opacity: 0;
+        }
+    
+        to {
+            transform: perspective($animationPerspective) rotateX(0);
+            opacity: 1;
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>zoomin</td>
+                <td style="white-space: pre" class="p-0">
+    animation: zoomin .15s linear;
+
+    @keyframes zoomin {
+        from {
+            opacity: 0;
+            transform: scale3d(0.3, 0.3, 0.3);
+        }
+    
+        50% {
+            opacity: 1;
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>zoomindown</td>
+                <td style="white-space: pre" class="p-0">
+    animation: zoomindown .15s linear;
+
+    @keyframes zoomindown {
+        from {
+            opacity: 0;
+            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        }
+    
+        60% {
+            opacity: 1;
+            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>zoominleft</td>
+                <td style="white-space: pre" class="p-0">
+    animation: zoominleft .15s linear;
+
+    @keyframes zoominleft {
+        from {
+            opacity: 0;
+            transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+        }
+    
+        60% {
+            opacity: 1;
+            transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>zoomninright</td>
+                <td style="white-space: pre" class="p-0">
+    animation: zoomninright .15s linear;
+
+    @keyframes zoomninright {
+        from {
+            opacity: 0;
+            transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+        }
+    
+        60% {
+            opacity: 1;
+            transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+        }
+    }
+                </td>
+            </tr>
+            <tr>
+                <td>zoominup</td>
+                <td style="white-space: pre" class="p-0">
+    animation: zoominup .15s linear;
+
+    @keyframes zoominup {
+        from {
+            opacity: 0;
+            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+        }
+    
+        60% {
+            opacity: 1;
+            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        }
     }
                 </td>
             </tr>