Update .gitignore

Allow upload of compiled themes

Signed-off-by: Alessadro Parisi <alessandro.parisi406@gmail.com>

.gitignore

@@ -41,5 +41,4 @@ bin/
 ### Mac OS ###
 .DS_Store
 
-scenicView.properties
-modules/resources/src/main/resources/io/github/palexdev/mfxresources/sass/md3/*.css
+scenicView.properties

.idea/session-manager.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "Default",
+    "desc": "Write documentation for the new added Curves, and document the all the other related changes (add videos from Flutter too)",
+    "fFile": "/modules/effects/src/main/java/io/github/palexdev/mfxeffects/animations/motion/Motion.java",
+    "files": [
+      "/modules/effects/src/main/java/io/github/palexdev/mfxeffects/animations/motion/Motion.java"
+    ]
+  }
+]

modules/resources/src/main/resources/io/github/palexdev/mfxresources/sass/md3/mfx-light.css

@@ -0,0 +1,916 @@
+@import "../../fonts/Fonts.css";
+
+/****************************************************************************************************
+ * Elevated Buttons
+ ****************************************************************************************************/
+.mfx-button.elevated {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #6750A4;
+  -fx-background-color: #f7f2fa;
+  -fx-background-radius: 20px;
+  -fx-padding: 0px 24px 0px 24px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-init-height: 40px;
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.elevated:disabled {
+  -fx-text-fill: rgba(28, 27, 31, 0.38);
+  -fx-background-color: rgba(28, 27, 31, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.elevated:hover {
+  -fx-background-color: #f3edf7, rgba(103, 80, 164, 0.08);
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.elevated:focused,
+.mfx-button.elevated:pressed {
+  -fx-background-color: #f7f2fa, rgba(103, 80, 164, 0.12);
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.elevated .mfx-font-icon {
+  -mfx-color: #6750A4;
+  -mfx-size: 18px;
+}
+
+.mfx-button.elevated:disabled .mfx-font-icon {
+  -mfx-color: rgba(28, 27, 31, 0.38);
+}
+
+.mfx-button.elevated:with-icon-left {
+  -fx-padding: 0px 24px 0px 16px;
+}
+
+.mfx-button.elevated:with-icon-right {
+  -fx-padding: 0px 16px 0px 24px;
+}
+
+.mfx-button.elevated .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(103, 80, 164, 0.12);
+}
+
+/****************************************************************************************************
+ * Filled Buttons
+ ****************************************************************************************************/
+.mfx-button.filled {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #FFFFFF;
+  -fx-background-color: #6750a4;
+  -fx-background-radius: 20px;
+  -fx-padding: 0px 24px 0px 24px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-init-height: 40px;
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.filled:disabled {
+  -fx-text-fill: rgba(28, 27, 31, 0.38);
+  -fx-background-color: rgba(28, 27, 31, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.filled:hover {
+  -fx-background-color: #6f59a9, rgba(255, 255, 255, 0.08);
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.filled:focused,
+.mfx-button.filled:pressed {
+  -fx-background-color: #6750a4, rgba(255, 255, 255, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.filled .mfx-font-icon {
+  -mfx-color: #FFFFFF;
+  -mfx-size: 18px;
+}
+
+.mfx-button.filled:disabled .mfx-font-icon {
+  -mfx-color: rgba(28, 27, 31, 0.38);
+}
+
+.mfx-button.filled:with-icon-left {
+  -fx-padding: 0px 24px 0px 16px;
+}
+
+.mfx-button.filled:with-icon-right {
+  -fx-padding: 0px 16px 0px 24px;
+}
+
+.mfx-button.filled .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(255, 255, 255, 0.12);
+}
+
+/****************************************************************************************************
+ * Outlined Buttons
+ ****************************************************************************************************/
+.mfx-button.outlined {
+  -fx-border-color: #79747E;
+  -fx-border-radius: 20px;
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #6750A4;
+  -fx-background-color: #fffbfe;
+  -fx-background-radius: 20px;
+  -fx-padding: 0px 24px 0px 24px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-init-height: 40px;
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.outlined:disabled {
+  -fx-border-color: rgba(121, 116, 126, 0.12);
+}
+
+.mfx-button.outlined:disabled {
+  -fx-text-fill: rgba(28, 27, 31, 0.38);
+  -fx-background-color: rgba(28, 27, 31, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.outlined:hover {
+  -fx-background-color: #fffbfe, rgba(103, 80, 164, 0.08);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.outlined:focused,
+.mfx-button.outlined:pressed {
+  -fx-background-color: #fffbfe, rgba(103, 80, 164, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.outlined .mfx-font-icon {
+  -mfx-color: #6750A4;
+  -mfx-size: 18px;
+}
+
+.mfx-button.outlined:disabled .mfx-font-icon {
+  -mfx-color: rgba(28, 27, 31, 0.38);
+}
+
+.mfx-button.outlined:with-icon-left {
+  -fx-padding: 0px 24px 0px 16px;
+}
+
+.mfx-button.outlined:with-icon-right {
+  -fx-padding: 0px 16px 0px 24px;
+}
+
+.mfx-button.outlined .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(103, 80, 164, 0.12);
+}
+
+/****************************************************************************************************
+ * Text Buttons
+ ****************************************************************************************************/
+.mfx-button.text {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #6750A4;
+  -fx-background-color: transparent;
+  -fx-background-radius: 20px;
+  -fx-padding: 0px 12px 0px 12px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-init-height: 40px;
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.text:disabled {
+  -fx-text-fill: rgba(28, 27, 31, 0.38);
+  -fx-background-color: rgba(28, 27, 31, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.text:hover {
+  -fx-background-color: transparent, rgba(103, 80, 164, 0.08);
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.text:focused,
+.mfx-button.text:pressed {
+  -fx-background-color: transparent, rgba(103, 80, 164, 0.12);
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.text .mfx-font-icon {
+  -mfx-color: #6750A4;
+  -mfx-size: 18px;
+}
+
+.mfx-button.text:disabled .mfx-font-icon {
+  -mfx-color: rgba(28, 27, 31, 0.38);
+}
+
+.mfx-button.text:with-icon-left {
+  -fx-padding: 0px 16px 0px 12px;
+}
+
+.mfx-button.text:with-icon-right {
+  -fx-padding: 0px 12px 0px 16px;
+}
+
+.mfx-button.text .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(103, 80, 164, 0.12);
+}
+
+/****************************************************************************************************
+ * Tonal Filled Buttons
+ ****************************************************************************************************/
+.mfx-button.tonal-filled {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #1D192B;
+  -fx-background-color: #e8def8;
+  -fx-background-radius: 20px;
+  -fx-padding: 0px 12px 0px 12px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-init-height: 40px;
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.tonal-filled:disabled {
+  -fx-text-fill: rgba(28, 27, 31, 0.38);
+  -fx-background-color: rgba(28, 27, 31, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.tonal-filled:hover {
+  -fx-background-color: #ded4ee, rgba(29, 25, 43, 0.08);
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.tonal-filled:focused,
+.mfx-button.tonal-filled:pressed {
+  -fx-background-color: #e8def8, rgba(29, 25, 43, 0.12);
+  -mfx-elevation: LEVEL0;
+}
+
+.mfx-button.tonal-filled .mfx-font-icon {
+  -mfx-color: #1D192B;
+  -mfx-size: 18px;
+}
+
+.mfx-button.tonal-filled:disabled .mfx-font-icon {
+  -mfx-color: rgba(28, 27, 31, 0.38);
+}
+
+.mfx-button.tonal-filled:with-icon-left {
+  -fx-padding: 0px 16px 0px 12px;
+}
+
+.mfx-button.tonal-filled:with-icon-right {
+  -fx-padding: 0px 12px 0px 16px;
+}
+
+.mfx-button.tonal-filled .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(29, 25, 43, 0.12);
+}
+
+/****************************************************************************************************
+ * FAB Primary
+ ****************************************************************************************************/
+.mfx-button.fab {
+  -fx-background-color: #EADDFF;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 56px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.small {
+  -fx-background-radius: 12px;
+  -mfx-init-height: 40px;
+  -mfx-init-width: 40px;
+}
+
+.mfx-button.fab.large {
+  -fx-background-radius: 28px;
+  -mfx-init-height: 96px;
+  -mfx-init-width: 96px;
+}
+
+.mfx-button.fab:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.fab:hover {
+  -fx-background-color: #EADDFF, rgba(33, 0, 93, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.fab:focused,
+.mfx-button.fab:pressed {
+  -fx-background-color: #EADDFF, rgba(33, 0, 93, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab .mfx-font-icon {
+  -mfx-color: #21005D;
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.small .mfx-font-icon {
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.large .mfx-font-icon {
+  -mfx-size: 36px;
+}
+
+.mfx-button.fab .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(33, 0, 93, 0.12);
+}
+
+.mfx-button.fab.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.fab.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.fab.lowered:focused,
+.mfx-button.fab.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * FAB Surface
+ ****************************************************************************************************/
+.mfx-button.fab.surface {
+  -fx-background-color: #FFFBFE;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 56px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.surface.small {
+  -fx-background-radius: 12px;
+  -mfx-init-height: 40px;
+  -mfx-init-width: 40px;
+}
+
+.mfx-button.fab.surface.large {
+  -fx-background-radius: 28px;
+  -mfx-init-height: 96px;
+  -mfx-init-width: 96px;
+}
+
+.mfx-button.fab.surface:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.fab.surface:hover {
+  -fx-background-color: #FFFBFE, rgba(103, 80, 164, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.fab.surface:focused,
+.mfx-button.fab.surface:pressed {
+  -fx-background-color: #FFFBFE, rgba(103, 80, 164, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.surface .mfx-font-icon {
+  -mfx-color: #6750A4;
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.surface.small .mfx-font-icon {
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.surface.large .mfx-font-icon {
+  -mfx-size: 36px;
+}
+
+.mfx-button.fab.surface .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(103, 80, 164, 0.12);
+}
+
+.mfx-button.fab.surface.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.fab.surface.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.fab.surface.lowered:focused,
+.mfx-button.fab.surface.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * FAB Secondary
+ ****************************************************************************************************/
+.mfx-button.fab.secondary {
+  -fx-background-color: #E8DEF8;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 56px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.secondary.small {
+  -fx-background-radius: 12px;
+  -mfx-init-height: 40px;
+  -mfx-init-width: 40px;
+}
+
+.mfx-button.fab.secondary.large {
+  -fx-background-radius: 28px;
+  -mfx-init-height: 96px;
+  -mfx-init-width: 96px;
+}
+
+.mfx-button.fab.secondary:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.fab.secondary:hover {
+  -fx-background-color: #E8DEF8, rgba(29, 25, 43, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.fab.secondary:focused,
+.mfx-button.fab.secondary:pressed {
+  -fx-background-color: #E8DEF8, rgba(29, 25, 43, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.secondary .mfx-font-icon {
+  -mfx-color: #1D192B;
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.secondary.small .mfx-font-icon {
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.secondary.large .mfx-font-icon {
+  -mfx-size: 36px;
+}
+
+.mfx-button.fab.secondary .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(29, 25, 43, 0.12);
+}
+
+.mfx-button.fab.secondary.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.fab.secondary.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.fab.secondary.lowered:focused,
+.mfx-button.fab.secondary.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * FAB Tertiary
+ ****************************************************************************************************/
+.mfx-button.fab.tertiary {
+  -fx-background-color: #FFD8E4;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 56px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.tertiary.small {
+  -fx-background-radius: 12px;
+  -mfx-init-height: 40px;
+  -mfx-init-width: 40px;
+}
+
+.mfx-button.fab.tertiary.large {
+  -fx-background-radius: 28px;
+  -mfx-init-height: 96px;
+  -mfx-init-width: 96px;
+}
+
+.mfx-button.fab.tertiary:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.fab.tertiary:hover {
+  -fx-background-color: #FFD8E4, rgba(49, 17, 29, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.fab.tertiary:focused,
+.mfx-button.fab.tertiary:pressed {
+  -fx-background-color: #FFD8E4, rgba(49, 17, 29, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.fab.tertiary .mfx-font-icon {
+  -mfx-color: #31111D;
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.tertiary.small .mfx-font-icon {
+  -mfx-size: 24px;
+}
+
+.mfx-button.fab.tertiary.large .mfx-font-icon {
+  -mfx-size: 36px;
+}
+
+.mfx-button.fab.tertiary .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(49, 17, 29, 0.12);
+}
+
+.mfx-button.fab.tertiary.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.fab.tertiary.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.fab.tertiary.lowered:focused,
+.mfx-button.fab.tertiary.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * Extended FAB Primary
+ ****************************************************************************************************/
+.mfx-button.extended-fab {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #21005D;
+  -fx-background-color: #EADDFF;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 80px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.extended-fab:hover {
+  -fx-background-color: #EADDFF, rgba(33, 0, 93, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.extended-fab:focused,
+.mfx-button.extended-fab:pressed {
+  -fx-background-color: #EADDFF, rgba(33, 0, 93, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab:with-icon-left {
+  -fx-padding: 0px 20px 0px 16px;
+}
+
+.mfx-button.extended-fab:with-icon-right {
+  -fx-padding: 0px 16px 0px 20px;
+}
+
+.mfx-button.extended-fab .mfx-font-icon {
+  -mfx-color: #21005D;
+  -mfx-size: 24px;
+}
+
+.mfx-button.extended-fab .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(33, 0, 93, 0.12);
+}
+
+.mfx-button.extended-fab.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.extended-fab.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.extended-fab.lowered:focused,
+.mfx-button.extended-fab.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * Extended FAB Surface
+ ****************************************************************************************************/
+.mfx-button.extended-fab.surface {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #6750A4;
+  -fx-background-color: #FFFBFE;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 80px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab.surface:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.extended-fab.surface:hover {
+  -fx-background-color: #FFFBFE, rgba(103, 80, 164, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.extended-fab.surface:focused,
+.mfx-button.extended-fab.surface:pressed {
+  -fx-background-color: #FFFBFE, rgba(103, 80, 164, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab.surface:with-icon-left {
+  -fx-padding: 0px 20px 0px 16px;
+}
+
+.mfx-button.extended-fab.surface:with-icon-right {
+  -fx-padding: 0px 16px 0px 20px;
+}
+
+.mfx-button.extended-fab.surface .mfx-font-icon {
+  -mfx-color: #6750A4;
+  -mfx-size: 24px;
+}
+
+.mfx-button.extended-fab.surface .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(103, 80, 164, 0.12);
+}
+
+.mfx-button.extended-fab.surface.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.extended-fab.surface.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.extended-fab.surface.lowered:focused,
+.mfx-button.extended-fab.surface.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * Extended FAB Secondary
+ ****************************************************************************************************/
+.mfx-button.extended-fab.secondary {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #1D192B;
+  -fx-background-color: #E8DEF8;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 80px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab.secondary:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.extended-fab.secondary:hover {
+  -fx-background-color: #E8DEF8, rgba(29, 25, 43, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.extended-fab.secondary:focused,
+.mfx-button.extended-fab.secondary:pressed {
+  -fx-background-color: #E8DEF8, rgba(29, 25, 43, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab.secondary:with-icon-left {
+  -fx-padding: 0px 20px 0px 16px;
+}
+
+.mfx-button.extended-fab.secondary:with-icon-right {
+  -fx-padding: 0px 16px 0px 20px;
+}
+
+.mfx-button.extended-fab.secondary .mfx-font-icon {
+  -mfx-color: #1D192B;
+  -mfx-size: 24px;
+}
+
+.mfx-button.extended-fab.secondary .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(29, 25, 43, 0.12);
+}
+
+.mfx-button.extended-fab.secondary.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.extended-fab.secondary.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.extended-fab.secondary.lowered:focused,
+.mfx-button.extended-fab.secondary.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+/****************************************************************************************************
+ * Extended FAB Tertiary
+ ****************************************************************************************************/
+.mfx-button.extended-fab.tertiary {
+  -fx-font-family: "Roboto Medium";
+  -fx-font-weight: 500;
+  -fx-font-size: 14px;
+  -fx-line-spacing: 20px;
+  -fx-text-fill: #31111D;
+  -fx-background-color: #FFD8E4;
+  -fx-background-radius: 16px;
+  -mfx-init-height: 56px;
+  -mfx-init-width: 80px;
+  -fx-graphic-text-gap: 8px;
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab.tertiary:disabled > .label {
+  -fx-opacity: 1;
+}
+
+.mfx-button.extended-fab.tertiary:hover {
+  -fx-background-color: #FFD8E4, rgba(49, 17, 29, 0.08);
+  -mfx-elevation: LEVEL4;
+}
+
+.mfx-button.extended-fab.tertiary:focused,
+.mfx-button.extended-fab.tertiary:pressed {
+  -fx-background-color: #FFD8E4, rgba(49, 17, 29, 0.12);
+  -mfx-elevation: LEVEL3;
+}
+
+.mfx-button.extended-fab.tertiary:with-icon-left {
+  -fx-padding: 0px 20px 0px 16px;
+}
+
+.mfx-button.extended-fab.tertiary:with-icon-right {
+  -fx-padding: 0px 16px 0px 20px;
+}
+
+.mfx-button.extended-fab.tertiary .mfx-font-icon {
+  -mfx-color: #31111D;
+  -mfx-size: 24px;
+}
+
+.mfx-button.extended-fab.tertiary .mfx-ripple-generator {
+  -mfx-ripple-color: rgba(49, 17, 29, 0.12);
+}
+
+.mfx-button.extended-fab.tertiary.lowered {
+  -mfx-elevation: LEVEL1;
+}
+
+.mfx-button.extended-fab.tertiary.lowered:hover {
+  -mfx-elevation: LEVEL2;
+}
+
+.mfx-button.extended-fab.tertiary.lowered:focused,
+.mfx-button.extended-fab.tertiary.lowered:pressed {
+  -mfx-elevation: LEVEL1;
+}
+
+* {
+  /* Palette */
+  -source: #6751a4;
+  -md-ref-palette-primary0: #000000;
+  -md-ref-palette-primary10: #20005c;
+  -md-ref-palette-primary20: #381e71;
+  -md-ref-palette-primary30: #4f378b;
+  -md-ref-palette-primary40: #6751a4;
+  -md-ref-palette-primary50: #7e65bd;
+  -md-ref-palette-primary60: #9881da;
+  -md-ref-palette-primary70: #b49bf8;
+  -md-ref-palette-primary80: #d1bdff;
+  -md-ref-palette-primary90: #e9dbff;
+  -md-ref-palette-primary95: #f5ebff;
+  -md-ref-palette-primary99: #fffafe;
+  -md-ref-palette-primary100: #ffffff;
+  -md-ref-palette-secondary0: #000000;
+  -md-ref-palette-secondary10: #1c192a;
+  -md-ref-palette-secondary20: #342e42;
+  -md-ref-palette-secondary30: #4b4559;
+  -md-ref-palette-secondary40: #625b71;
+  -md-ref-palette-secondary50: #7a7288;
+  -md-ref-palette-secondary60: #958da5;
+  -md-ref-palette-secondary70: #afa5c0;
+  -md-ref-palette-secondary80: #cbc1dc;
+  -md-ref-palette-secondary90: #e8ddf8;
+  -md-ref-palette-secondary95: #f5ebff;
+  -md-ref-palette-secondary99: #fffafe;
+  -md-ref-palette-secondary100: #ffffff;
+  -md-ref-palette-tertiary0: #000000;
+  -md-ref-palette-tertiary10: #31111d;
+  -md-ref-palette-tertiary20: #4b2633;
+  -md-ref-palette-tertiary30: #633b48;
+  -md-ref-palette-tertiary40: #7f5361;
+  -md-ref-palette-tertiary50: #986776;
+  -md-ref-palette-tertiary60: #b48392;
+  -md-ref-palette-tertiary70: #d29dac;
+  -md-ref-palette-tertiary80: #efb8c8;
+  -md-ref-palette-tertiary90: #ffd6e2;
+  -md-ref-palette-tertiary95: #ffebf0;
+  -md-ref-palette-tertiary99: #fffbfa;
+  -md-ref-palette-tertiary100: #ffffff;
+  -md-ref-palette-error0: #000000;
+  -md-ref-palette-error10: #410e0b;
+  -md-ref-palette-error20: #601410;
+  -md-ref-palette-error30: #8c1d18;
+  -md-ref-palette-error40: #b3261e;
+  -md-ref-palette-error50: #dc362e;
+  -md-ref-palette-error60: #e46962;
+  -md-ref-palette-error70: #ec928e;
+  -md-ref-palette-error80: #f2b8b5;
+  -md-ref-palette-error90: #f9dedc;
+  -md-ref-palette-error95: #fceeee;
+  -md-ref-palette-error99: #fffcfa;
+  -md-ref-palette-error100: #ffffff;
+  -md-ref-palette-neutral0: #000000;
+  -md-ref-palette-neutral10: #1b1a1e;
+  -md-ref-palette-neutral20: #302f32;
+  -md-ref-palette-neutral30: #484649;
+  -md-ref-palette-neutral40: #5f5c61;
+  -md-ref-palette-neutral50: #79757a;
+  -md-ref-palette-neutral60: #928f94;
+  -md-ref-palette-neutral70: #ada9ad;
+  -md-ref-palette-neutral80: #c9c4ca;
+  -md-ref-palette-neutral90: #e5e0e4;
+  -md-ref-palette-neutral95: #f5f0f5;
+  -md-ref-palette-neutral99: #fffafe;
+  -md-ref-palette-neutral100: #ffffff;
+  -md-ref-palette-neutral-variant0: #000000;
+  -md-ref-palette-neutral-variant10: #1e1b23;
+  -md-ref-palette-neutral-variant20: #322f37;
+  -md-ref-palette-neutral-variant30: #49454f;
+  -md-ref-palette-neutral-variant40: #5f5c66;
+  -md-ref-palette-neutral-variant50: #78737d;
+  -md-ref-palette-neutral-variant60: #938f99;
+  -md-ref-palette-neutral-variant70: #ada8b3;
+  -md-ref-palette-neutral-variant80: #c9c4cf;
+  -md-ref-palette-neutral-variant90: #e7dfec;
+  -md-ref-palette-neutral-variant95: #f6effa;
+  -md-ref-palette-neutral-variant99: #fffafe;
+  -md-ref-palette-neutral-variant100: #ffffff;
+  /* Scheme */
+  -md-sys-color-primary: #6750A4;
+  -md-sys-color-on-primary: #FFFFFF;
+  -md-sys-color-primary-container: #EADDFF;
+  -md-sys-color-on-primary-container: #21005D;
+  -md-sys-color-secondary: #625B71;
+  -md-sys-color-on-secondary: #FFFFFF;
+  -md-sys-color-secondary-container: #E8DEF8;
+  -md-sys-color-on-secondary-container: #1D192B;
+  -md-sys-color-tertiary: #7D5260;
+  -md-sys-color-on-tertiary: #FFFFFF;
+  -md-sys-color-tertiary-container: #FFD8E4;
+  -md-sys-color-on-tertiary-container: #31111D;
+  -md-sys-color-error: #B3261E;
+  -md-sys-color-on-error: #FFFFFF;
+  -md-sys-color-error-container: #F9DEDC;
+  -md-sys-color-on-error-container: #410E0B;
+  -md-sys-color-outline: #79747E;
+  -md-sys-color-background: #FFFBFE;
+  -md-sys-color-on-background: #1C1B1F;
+  -md-sys-color-surface: #FFFBFE;
+  -md-sys-color-on-surface: #1C1B1F;
+  -md-sys-color-surface-variant: #E7E0EC;
+  -md-sys-color-on-surface-variant: #49454F;
+  -md-sys-color-inverse-surface: #313033;
+  -md-sys-color-inverse-on-surface: #F4EFF4;
+  -md-sys-color-inverse-primary: #D0BCFF;
+  -md-sys-color-shadow: #000000;
+  -md-sys-color-surface-tint: #6750A4;
+  -md-sys-color-outline-variant: #CAC4D0;
+  -md-sys-color-scrim: #000000;
+}