diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e9d1d37
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+theme.css
+.DS_STORE
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..fc98e92
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# Changelog
+
+## [9.2.0](https://github.com/primefaces/primereact-sass-theme/tree/0.2.0) (2023-03-13)
+
+**Implemented New Features and Enhancements:**
+
+- Initial release
\ No newline at end of file
diff --git a/README.md b/README.md
index 7ce9344..e98be10 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
-# primereact-sass-theme
-PrimeReact Theming with SASS
+# PrimeReact Theming with SASS
+
+Visit the [official documentation](https://primereact.org/theming/#customtheme) for more information.
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b705778
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+    "name": "primereact-sass-theme",
+    "version": "9.2.0",
+    "description": "PrimeReact Sass Theme",
+    "homepage": "https://primereact.org/",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/primefaces/primereact-sass-theme.git"
+    },
+    "keywords": [
+      "primereact",
+      "react",
+      "ui framework",
+      "component framework",
+      "ui library",
+      "component library",
+      "material",
+      "bootstrap"
+    ],
+    "license": "MIT",
+    "bugs": {
+      "url": "https://github.com/primefaces/primereact-sass-theme/issues"
+    }
+  }
+  
\ No newline at end of file
diff --git a/theme-base/_colors.scss b/theme-base/_colors.scss
new file mode 100644
index 0000000..076c683
--- /dev/null
+++ b/theme-base/_colors.scss
@@ -0,0 +1,18 @@
+:root {
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+                }
+                @else {
+                    --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+                }
+            }
+
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/_common.scss b/theme-base/_common.scss
new file mode 100644
index 0000000..464a189
--- /dev/null
+++ b/theme-base/_common.scss
@@ -0,0 +1,68 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: $fontFamily;
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-link {
+    font-size: $fontSize;
+    font-family: $fontFamily;
+    border-radius: $borderRadius;
+
+    &:focus {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+    
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/_components.scss b/theme-base/_components.scss
new file mode 100644
index 0000000..5e0d898
--- /dev/null
+++ b/theme-base/_components.scss
@@ -0,0 +1,102 @@
+@import '_mixins';
+@import '_common';
+@import '_colors';
+
+//Input
+@import './components/input/_autocomplete';
+@import './components/input/_calendar';
+@import './components/input/_cascadeselect';
+@import './components/input/_checkbox';
+@import './components/input/_chips';
+@import './components/input/_colorpicker';
+@import './components/input/_dropdown';
+@import './components/input/_editor';
+@import './components/input/_inputgroup';
+@import './components/input/_inputnumber';
+@import './components/input/_inputswitch';
+@import './components/input/_inputtext';
+@import './components/input/_listbox';
+@import './components/input/_mention';
+@import './components/input/_multiselect';
+@import './components/input/_password';
+@import './components/input/_radiobutton';
+@import './components/input/_rating';
+@import './components/input/_selectbutton';
+@import './components/input/_slider';
+@import './components/input/_treeselect';
+@import './components/input/_togglebutton';
+
+//Button
+@import './components/button/_button';
+@import './components/button/_splitbutton';
+@import './components/button/_speeddial';
+
+//Data
+@import './components/data/_carousel';
+@import './components/data/_datatable';
+@import './components/data/_dataview';
+@import './components/data/_datascroller';
+@import './components/data/_filter';
+@import './components/data/_fullcalendar';
+@import './components/data/_orderlist';
+@import './components/data/_organizationchart';
+@import './components/data/_paginator';
+@import './components/data/_picklist';
+@import './components/data/_tree';
+@import './components/data/_treetable';
+@import './components/data/_timeline';
+
+//Panel
+@import './components/panel/_accordion';
+@import './components/panel/_card';
+@import './components/panel/_fieldset';
+@import './components/panel/_divider';
+@import './components/panel/_panel';
+@import './components/panel/_splitter';
+@import './components/panel/_scrollpanel';
+@import './components/panel/_tabview';
+@import './components/panel/_toolbar';
+
+//Overlay
+@import './components/overlay/_confirmpopup';
+@import './components/overlay/_dialog';
+@import './components/overlay/_overlaypanel';
+@import './components/overlay/_sidebar';
+@import './components/overlay/_tooltip';
+
+//File
+@import './components/file/_fileupload';
+
+//Menu
+@import './components/menu/_breadcrumb';
+@import './components/menu/_contextmenu';
+@import './components/menu/_dock';
+@import './components/menu/_megamenu';
+@import './components/menu/_menu';
+@import './components/menu/_menubar';
+@import './components/menu/_panelmenu';
+@import './components/menu/_slidemenu';
+@import './components/menu/_steps';
+@import './components/menu/_tabmenu';
+@import './components/menu/_tieredmenu';
+
+//Messages
+@import './components/messages/_inlinemessage';
+@import './components/messages/_message';
+@import 'components/messages/toast';
+
+//MultiMedia
+@import './components/multimedia/_galleria';
+@import './components/multimedia/_image';
+
+//Misc
+@import './components/misc/_avatar';
+@import './components/misc/_chip';
+@import './components/misc/_scrolltop';
+@import './components/misc/_skeleton';
+@import './components/misc/_tag';
+@import './components/misc/_inplace';
+@import './components/misc/_progressbar';
+@import './components/misc/_terminal';
+@import './components/misc/_blockui';
+@import './components/misc/_badge';
\ No newline at end of file
diff --git a/theme-base/_mixins.scss b/theme-base/_mixins.scss
new file mode 100644
index 0000000..1f8d38f
--- /dev/null
+++ b/theme-base/_mixins.scss
@@ -0,0 +1,199 @@
+@mixin icon-override($icon) {
+	&:before {
+		content: $icon;
+	}
+}
+
+@mixin focused() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+	@include focused();
+	border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+	border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+	padding: $menuitemPadding;
+	color: $menuitemTextColor;
+    border-radius: $menuitemBorderRadius;
+    transition: $listItemTransition;
+    user-select: none;
+
+	.p-menuitem-text {
+        color: $menuitemTextColor;
+	}
+
+	.p-menuitem-icon {
+		color: $menuitemIconColor;
+		margin-right: $inlineSpacing;
+    }
+    
+    .p-submenu-icon {
+        color: $menuitemIconColor;
+    }
+
+	&:not(.p-disabled):hover {
+		background: $menuitemHoverBg;
+
+		.p-menuitem-text {
+			color: $menuitemTextHoverColor;
+		}
+
+		.p-menuitem-icon {
+			color: $menuitemIconHoverColor;
+        }
+        
+        .p-submenu-icon {
+            color: $menuitemIconHoverColor;
+        }
+	}
+
+	&:focus {
+		@include focused-listitem();
+	}
+}
+
+@mixin horizontal-rootmenuitem-link {
+	padding: $horizontalMenuRootMenuitemPadding;
+	color: $horizontalMenuRootMenuitemTextColor;
+    border-radius: $horizontalMenuRootMenuitemBorderRadius;
+    transition: $listItemTransition;
+    user-select: none;
+
+	.p-menuitem-text {
+        color: $horizontalMenuRootMenuitemTextColor;
+	}
+
+	.p-menuitem-icon {
+		color: $horizontalMenuRootMenuitemIconColor;
+		margin-right: $inlineSpacing;
+    }
+    
+    .p-submenu-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-left: $inlineSpacing;
+    }
+
+	&:not(.p-disabled):hover {
+		background: $horizontalMenuRootMenuitemHoverBg;
+
+		.p-menuitem-text {
+			color: $horizontalMenuRootMenuitemTextHoverColor;
+		}
+
+		.p-menuitem-icon {
+			color: $horizontalMenuRootMenuitemIconHoverColor;
+        }
+        
+        .p-submenu-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+        }
+	}
+
+	&:focus {
+		@include focused-listitem();
+	}
+}
+
+@mixin placeholder {
+	::-webkit-input-placeholder {
+		@content
+	}
+	:-moz-placeholder {
+		@content
+	}
+	::-moz-placeholder {
+		@content
+	}
+	:-ms-input-placeholder {
+		@content
+	}
+}
+
+@mixin scaledPadding($val, $scale) {
+    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+    font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+    ul {
+        li {
+            a {
+                padding-left: $val * ($index + 1);
+            }
+
+            @if $index < $length {
+                @include nested-submenu-indents($val, $index + 2, $length);
+            }
+        }
+    }
+}
+
+@mixin action-icon($enabled: true) {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    @if $enabled {
+        &:enabled:hover {
+            @include action-icon-hover();
+        }
+    } @else {
+        &:hover {
+            @include action-icon-hover();
+        }
+    }
+
+    &:focus {
+        @include focused();
+    }
+}
+
+@mixin action-icon-hover() {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+}
+
+@mixin button-states {
+    // <button> and <a> tags support :enabled selector.
+
+    &:enabled,
+    &:not(button):not(a):not(.p-disabled) {
+        @content;
+    }
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}
\ No newline at end of file
diff --git a/theme-base/components/button/_button.scss b/theme-base/components/button/_button.scss
new file mode 100644
index 0000000..686441d
--- /dev/null
+++ b/theme-base/components/button/_button.scss
@@ -0,0 +1,632 @@
+.p-button {
+    color: $buttonTextColor;
+    background: $buttonBg;
+    border: $buttonBorder;
+    padding: $buttonPadding;
+    font-size: $fontSize;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    @include button-states {
+        &:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+            border-color: $buttonHoverBorderColor;
+        }
+
+        &:active {
+            background: $buttonActiveBg;
+            color: $buttonTextActiveColor;
+            border-color: $buttonActiveBorderColor;
+        }
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $buttonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                color: $buttonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                color: $buttonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+            border-color: $plainButtonTextColor;
+
+            @include button-states {
+                &:hover {
+                    background: $plainButtonHoverBgColor;
+                    color: $plainButtonTextColor;
+                }
+        
+                &:active {
+                    background: $plainButtonActiveBgColor;
+                    color: $plainButtonTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $buttonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                color: $buttonBg;
+                border-color: transparent;
+            }
+
+            &:active {
+                background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                color: $buttonBg;
+                border-color: transparent;
+            }
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+
+            @include button-states {
+                &:hover {
+                    background: $plainButtonHoverBgColor;
+                    color: $plainButtonTextColor;
+                }
+        
+                &:active {
+                    background: $plainButtonActiveBgColor;
+                    color: $plainButtonTextColor;
+                }
+            }
+        }
+    }
+
+    &:focus {
+        @include focused();
+    }
+
+    .p-button-label {
+        transition-duration: $transitionDuration;
+    }
+
+    .p-button-icon-left {
+         margin-right: $inlineSpacing;
+    }
+
+    .p-button-icon-right {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-button-icon-bottom {
+        margin-top: $inlineSpacing;
+    }
+
+    .p-button-icon-top {
+       margin-bottom: $inlineSpacing;
+    }
+
+    .p-badge {
+        margin-left: $inlineSpacing;
+        min-width: $fontSize;
+        height: $fontSize;
+        line-height: $fontSize;
+        color: $buttonBg;
+        background-color: $buttonTextColor;
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+    }
+
+    &.p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+        padding: $buttonIconOnlyPadding;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            margin: 0;
+        }
+
+        &.p-button-rounded {
+            border-radius: 50%;
+            height: $buttonIconOnlyWidth;
+        }
+    }
+
+    &.p-button-sm {
+        @include scaledFontSize($fontSize, $scaleSM);
+        @include scaledPadding($buttonPadding, $scaleSM);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleSM);
+        }
+    }
+
+    &.p-button-lg {
+        @include scaledFontSize($fontSize, $scaleLG);
+        @include scaledPadding($buttonPadding, $scaleLG);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleLG);
+        }
+    }
+
+    &.p-button-loading-label-only {
+        &.p-button-loading-left {
+            .p-button-label {
+                margin-left: $inlineSpacing;
+            }
+        }
+        
+        &.p-button-loading-right {
+            .p-button-label {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &.p-button-loading-top {
+            .p-button-label {
+                margin-top: $inlineSpacing;
+            }
+        }
+
+        &.p-button-loading-bottom {
+            .p-button-label {
+                margin-bottom: $inlineSpacing;
+            }
+        }
+
+        .p-button-loading-icon {
+            margin: 0;
+        }
+    }
+}
+
+.p-fluid {
+    .p-button {
+        width: 100%;
+    }
+    
+    .p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+    }
+
+    .p-buttonset {
+        display: flex;
+        
+        .p-button {
+            flex: 1;
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: $secondaryButtonTextColor;
+    background: $secondaryButtonBg;
+    border: $secondaryButtonBorder;
+
+    @include button-states {
+        &:hover {
+            background: $secondaryButtonHoverBg;
+            color: $secondaryButtonTextHoverColor;
+            border-color: $secondaryButtonHoverBorderColor;
+        }
+
+        &:focus {
+            box-shadow: $secondaryButtonFocusShadow;
+        }
+
+        &:active {
+            background: $secondaryButtonActiveBg;
+            color: $secondaryButtonTextActiveColor;
+            border-color: $secondaryButtonActiveBorderColor;
+        }
+    }
+    
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                color: $secondaryButtonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                color: $secondaryButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $secondaryButtonBg;
+            }
+
+            &:active {
+                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $secondaryButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: $infoButtonTextColor;
+    background: $infoButtonBg;
+    border: $infoButtonBorder;
+
+    @include button-states {
+        &:hover {
+            background: $infoButtonHoverBg;
+            color: $infoButtonTextHoverColor;
+            border-color: $infoButtonHoverBorderColor;
+        }
+
+        &:focus {
+            box-shadow: $infoButtonFocusShadow;
+        }
+
+        &:active {
+            background: $infoButtonActiveBg;
+            color: $infoButtonTextActiveColor;
+            border-color: $infoButtonActiveBorderColor;
+        }
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                color: $infoButtonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                color: $infoButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $infoButtonBg;
+            }
+
+            &:active {
+                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $infoButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: $successButtonTextColor;
+    background: $successButtonBg;
+    border: $successButtonBorder;
+
+    @include button-states {
+        &:hover {
+            background: $successButtonHoverBg;
+            color: $successButtonTextHoverColor;
+            border-color: $successButtonHoverBorderColor;
+        }
+
+        &:focus {
+            box-shadow: $successButtonFocusShadow;
+        }
+
+        &:active {
+            background: $successButtonActiveBg;
+            color: $successButtonTextActiveColor;
+            border-color: $successButtonActiveBorderColor;
+        }
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $successButtonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                color: $successButtonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                color: $successButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $successButtonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $successButtonBg;
+            }
+
+            &:active {
+                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $successButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: $warningButtonTextColor;
+    background: $warningButtonBg;
+    border: $warningButtonBorder;
+    
+    @include button-states {
+        &:hover {
+            background: $warningButtonHoverBg;
+            color: $warningButtonTextHoverColor;
+            border-color: $warningButtonHoverBorderColor;
+        }
+
+        &:focus {
+            box-shadow: $warningButtonFocusShadow;
+        }
+
+        &:active {
+            background: $warningButtonActiveBg;
+            color: $warningButtonTextActiveColor;
+            border-color: $warningButtonActiveBorderColor;
+        }
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                color: $warningButtonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                color: $warningButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $warningButtonBg;
+            }
+
+            &:active {
+                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $warningButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: $helpButtonTextColor;
+    background: $helpButtonBg;
+    border: $helpButtonBorder;
+
+    @include button-states {
+        &:hover {
+            background: $helpButtonHoverBg;
+            color: $helpButtonTextHoverColor;
+            border-color: $helpButtonHoverBorderColor;
+        }
+
+        &:focus {
+            box-shadow: $helpButtonFocusShadow;
+        }
+
+        &:active {
+            background: $helpButtonActiveBg;
+            color: $helpButtonTextActiveColor;
+            border-color: $helpButtonActiveBorderColor;
+        }
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                color: $helpButtonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                color: $helpButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $helpButtonBg;
+            }
+
+            &:active {
+                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $helpButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: $dangerButtonTextColor;
+    background: $dangerButtonBg;
+    border: $dangerButtonBorder;
+
+    @include button-states {
+        &:hover {
+            background: $dangerButtonHoverBg;
+            color: $dangerButtonTextHoverColor;
+            border-color: $dangerButtonHoverBorderColor;
+        }
+
+        &:focus {
+            box-shadow: $dangerButtonFocusShadow;
+        }
+
+        &:active {
+            background: $dangerButtonActiveBg;
+            color: $dangerButtonTextActiveColor;
+            border-color: $dangerButtonActiveBorderColor;
+        }
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border: $outlinedButtonBorder;
+
+        @include button-states {
+            &:hover {
+                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                color: $dangerButtonBg;
+                border: $outlinedButtonBorder;
+            }
+
+            &:active {
+                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                color: $dangerButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border-color: transparent;
+
+        @include button-states {
+            &:hover {
+                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $dangerButtonBg;
+            }
+
+            &:active {
+                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $dangerButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-link {
+    color: $linkButtonColor;
+    background: transparent;
+    border: transparent;
+
+    @include button-states {
+        &:hover {
+            background:  transparent;
+            color: $linkButtonHoverColor;
+            border-color:  transparent;
+
+            .p-button-label {
+                text-decoration: $linkButtonTextHoverDecoration;
+            }
+        }
+
+        &:focus {
+            background: transparent;
+            box-shadow: $linkButtonFocusShadow;
+            border-color:  transparent;
+        }
+
+        &:active {
+            background:  transparent;
+            color: $linkButtonColor;
+            border-color:  transparent;
+        }
+    }
+}
diff --git a/theme-base/components/button/_speeddial.scss b/theme-base/components/button/_speeddial.scss
new file mode 100644
index 0000000..430bd67
--- /dev/null
+++ b/theme-base/components/button/_speeddial.scss
@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+.p-speeddial-button {
+    &.p-button.p-button-icon-only {
+        width: $speedDialButtonWidth;
+        height: $speedDialButtonHeight;
+
+        .p-button-icon {
+            font-size: $speedDialButtonIconFontSize;
+        }
+    }
+}
+
+.p-speeddial-action {
+    width: $speedDialActionWidth;
+    height: $speedDialActionHeight;
+    background: $speedDialActionBg;
+    color: $speedDialActionTextColor;
+
+    &:hover {
+        background: $speedDialActionHoverBg;
+        color: $speedDialActionTextHoverColor;
+    }
+}
+
+.p-speeddial-direction-up {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-down {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-top: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-left {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-right: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-right {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-left: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-circle,
+.p-speeddial-semi-circle,
+.p-speeddial-quarter-circle {
+    .p-speeddial-item {
+        margin: 0;
+
+        &:first-child,
+        &:last-child {
+            margin: 0;
+        }
+    }
+}
+
+.p-speeddial-mask {
+    background-color: $maskBg;
+}
\ No newline at end of file
diff --git a/theme-base/components/button/_splitbutton.scss b/theme-base/components/button/_splitbutton.scss
new file mode 100644
index 0000000..4f9ec8d
--- /dev/null
+++ b/theme-base/components/button/_splitbutton.scss
@@ -0,0 +1,381 @@
+.p-splitbutton {
+    border-radius: $borderRadius;
+
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                    color: $buttonBg;
+                }
+
+                &:active {
+                    background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                    color: $buttonBg;
+                }
+            }
+        }
+
+        &.p-button-plain {
+            > .p-button {
+                color: $plainButtonTextColor;
+                border-color: $plainButtonTextColor;
+
+                @include button-states {
+                    &:hover {
+                        background: $plainButtonHoverBgColor;
+                        color: $plainButtonTextColor;
+                    }
+            
+                    &:active {
+                        background: $plainButtonActiveBgColor;
+                        color: $plainButtonTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $buttonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                    color: $buttonBg;
+                    border-color: transparent;
+                }
+
+                &:active {
+                    background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                    color: $buttonBg;
+                    border-color: transparent;
+                }
+            }
+        }
+
+        &.p-button-plain {
+            > .p-button {
+                color: $plainButtonTextColor;
+
+                @include button-states {
+                    &:hover {
+                        background: $plainButtonHoverBgColor;
+                        color: $plainButtonTextColor;
+                    }
+            
+                    &:active {
+                        background: $plainButtonActiveBgColor;
+                        color: $plainButtonTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+
+        > .p-button {
+            border-radius: $roundedButtonBorderRadius;
+        }
+    }
+
+    &.p-button-sm {
+        > .p-button {
+            @include scaledFontSize($fontSize, $scaleSM);
+            @include scaledPadding($buttonPadding, $scaleSM);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleSM);
+            }
+        }
+    }
+
+    &.p-button-lg {
+        > .p-button {
+            @include scaledFontSize($fontSize, $scaleLG);
+            @include scaledPadding($buttonPadding, $scaleLG);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleLG);
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-secondary {    
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                    color: $secondaryButtonBg;
+                }
+
+                &:active {
+                    background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                    color: $secondaryButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $secondaryButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $secondaryButtonBg;
+                }
+
+                &:active {
+                    background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $secondaryButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-info {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                    color: $infoButtonBg;
+                }
+
+                &:active {
+                    background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                    color: $infoButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $infoButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $infoButtonBg;
+                }
+
+                &:active {
+                    background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $infoButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-success {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                    color: $successButtonBg;
+                }
+
+                &:active {
+                    background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                    color: $successButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $successButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $successButtonBg;
+                }
+
+                &:active {
+                    background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $successButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-warning {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                    color: $warningButtonBg;
+                }
+
+                &:active {
+                    background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                    color: $warningButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $warningButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $warningButtonBg;
+                }
+
+                &:active {
+                    background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $warningButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-help {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                    color: $helpButtonBg;
+                }
+
+                &:active {
+                    background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                    color: $helpButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $helpButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $helpButtonBg;
+                }
+
+                &:active {
+                    background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $helpButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-danger {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                    color: $dangerButtonBg;
+                }
+
+                &:active {
+                    background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                    color: $dangerButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $dangerButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $dangerButtonBg;
+                }
+
+                &:active {
+                    background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $dangerButtonBg;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/data/_carousel.scss b/theme-base/components/data/_carousel.scss
new file mode 100644
index 0000000..87c5653
--- /dev/null
+++ b/theme-base/components/data/_carousel.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-content {
+        .p-carousel-prev,
+        .p-carousel-next {
+            @include action-icon();
+            margin: $inlineSpacing;
+        }
+    }
+
+    .p-carousel-indicators {
+        padding: $carouselIndicatorsPadding;
+
+        .p-carousel-indicator {
+            margin-right: $inlineSpacing;
+            margin-bottom: $inlineSpacing;
+           
+            button {
+                background-color: $carouselIndicatorBg;
+                width: $carouselIndicatorWidth;
+                height: $carouselIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $carouselIndicatorBorderRadius;
+
+                &:hover {
+                    background: $carouselIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+}
diff --git a/theme-base/components/data/_datascroller.scss b/theme-base/components/data/_datascroller.scss
new file mode 100644
index 0000000..71bf78d
--- /dev/null
+++ b/theme-base/components/data/_datascroller.scss
@@ -0,0 +1,47 @@
+.p-datascroller {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-datascroller-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-datascroller-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    &.p-datascroller-inline {
+        .p-datascroller-list {
+            > li {
+                border: $dataViewListItemBorder;
+                border-width: $dataViewListItemBorderWidth;
+            }
+        }
+    }
+
+    .p-datascroller-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+}
diff --git a/theme-base/components/data/_datatable.scss b/theme-base/components/data/_datatable.scss
new file mode 100644
index 0000000..b47044b
--- /dev/null
+++ b/theme-base/components/data/_datatable.scss
@@ -0,0 +1,380 @@
+.p-datatable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-datatable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-datatable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-datatable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-datatable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):not(.p-sortable-disabled):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+
+            &:not(.p-sortable-disabled):hover {
+                background: $tableHeaderCellHighlightHoverBg;
+                color: $tableHeaderCellHighlightTextColor;
+    
+                .p-sortable-column-icon {
+                    color: $tableHeaderCellHighlightTextColor;
+                }
+            }
+        }
+
+        &:focus {
+            box-shadow: $inputListItemFocusShadow;
+            outline: 0 none;
+        }
+    }
+
+    .p-datatable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-row-toggler,
+                .p-row-editor-init,
+                .p-row-editor-save,
+                .p-row-editor-cancel {
+                    @include action-icon();
+                }
+
+                .p-row-editor-save {
+                    margin-right: $inlineSpacing;
+                }
+
+                > .p-column-title {
+                    font-weight: $tableHeaderCellFontWeight;
+                }
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $highlightBg;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $highlightBg;
+            }
+        }
+    }
+
+    &.p-datatable-selectable {
+        .p-datatable-tbody > tr.p-selectable-row {
+            &:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+                background: $tableBodyRowHoverBg;
+                color: $tableBodyRowTextHoverColor;
+            }
+
+            &:focus {
+                outline: .15rem solid $focusOutlineColor;
+                outline-offset: -.15rem;
+            }
+        }
+    }
+
+    &.p-datatable-selectable-cell {
+        .p-datatable-tbody > tr.p-selectable-row {
+            & > td.p-selectable-cell {
+                &:not(.p-highlight):hover {
+                    background: $tableBodyRowHoverBg;
+                    color: $tableBodyRowTextHoverColor;
+                }
+
+                &:focus {
+                    outline: .15rem solid $focusOutlineColor;
+                    outline-offset: -.15rem;
+                }
+            }
+        }
+    }
+
+    &.p-datatable-hoverable-rows {
+        .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-datatable-scrollable-header,
+    .p-datatable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
+        > .p-datatable-thead,
+        > .p-datatable-tfoot {
+            background-color: $tableHeaderCellBg;
+        }
+    }
+
+    .p-datatable-loading-icon {
+        font-size: $loadingIconFontSize;
+    }
+
+    &.p-datatable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-datatable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-paginator-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-paginator-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-datatable-thead {
+            > tr {
+                > th {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px 0 0 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 0 1px;
+                    }
+                }
+
+                &:last-child {
+                    > td {
+                        border-width: 1px 0 1px 1px;
+
+                        &:last-child {
+                            border-width: 1px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-thead + .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
+            > tr {
+                &:last-child {
+                    > td {
+                        border-width: 0 0 0 1px;
+
+                        &:last-child {
+                            border-width: 0 1px 0 1px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-striped {
+        .p-datatable-tbody {
+            > tr.p-row-odd {
+                background: $tableBodyRowEvenBg;
+    
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+    
+                    .p-row-toggler {
+                        color: $highlightTextColor;
+    
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                & + .p-row-expanded {
+                    background: $tableBodyRowEvenBg;
+                }
+            }
+        }
+    }
+
+    &.p-datatable-sm {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleSM);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-datatable-lg {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}
+
+.p-datatable-drag-selection-helper {
+    background: $tableDragHelperBg;
+}
\ No newline at end of file
diff --git a/theme-base/components/data/_dataview.scss b/theme-base/components/data/_dataview.scss
new file mode 100644
index 0000000..e7a6a11
--- /dev/null
+++ b/theme-base/components/data/_dataview.scss
@@ -0,0 +1,51 @@
+.p-dataview {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-dataview-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-dataview-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    &.p-dataview-list {
+        .p-dataview-content {
+            > .p-grid > div {
+                border: $dataViewListItemBorder;
+                border-width: $dataViewListItemBorderWidth;
+            }
+        }
+    }
+
+    .p-dataview-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dataview-loading-icon {
+        font-size: $loadingIconFontSize;
+    }
+}
diff --git a/theme-base/components/data/_filter.scss b/theme-base/components/data/_filter.scss
new file mode 100644
index 0000000..b82ae1b
--- /dev/null
+++ b/theme-base/components/data/_filter.scss
@@ -0,0 +1,138 @@
+.p-column-filter-row {
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        margin-left: $inlineSpacing;
+    }
+}
+
+.p-column-filter-menu-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &.p-column-filter-menu-button-open,
+    &.p-column-filter-menu-button-open:hover {
+        background: $actionIconHoverBg;
+        color: $actionIconHoverColor;
+    }
+
+    &.p-column-filter-menu-button-active,
+    &.p-column-filter-menu-button-active:hover {
+        background: $highlightBg;
+        color: $highlightTextColor;
+    }
+
+    &:focus {
+        @include focused();
+    }
+
+}
+
+.p-column-filter-clear-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus {
+        @include focused();
+    }
+}
+
+.p-column-filter-overlay {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+    min-width: $menuWidth;
+
+    .p-column-filter-row-items {
+        padding: $inputListPadding;
+
+        .p-column-filter-row-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+        }
+
+        .p-column-filter-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+}
+
+.p-column-filter-overlay-menu {
+    .p-column-filter-operator {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-column-filter-constraint {
+        padding: $panelContentPadding;
+        border-bottom: $divider;
+
+        .p-column-filter-matchmode-dropdown {
+            margin-bottom: $inlineSpacing;
+        }
+
+        .p-column-filter-remove-button {
+            margin-top: $inlineSpacing;
+        }
+
+        &:last-child {
+            border-bottom: 0 none;
+        }
+    }
+
+    .p-column-filter-add-rule {
+        padding: $panelFooterPadding;
+    }
+
+    .p-column-filter-buttonbar {
+        padding: $panelContentPadding;
+    } 
+}
\ No newline at end of file
diff --git a/theme-base/components/data/_fullcalendar.scss b/theme-base/components/data/_fullcalendar.scss
new file mode 100644
index 0000000..d225d79
--- /dev/null
+++ b/theme-base/components/data/_fullcalendar.scss
@@ -0,0 +1,328 @@
+.fc {
+    /* FullCalendar 4 */
+    &.fc-unthemed {
+        .fc-view-container {
+            th {
+                background: $panelHeaderBg;
+                border: $panelHeaderBorder;
+                color: $panelHeaderTextColor;
+            }
+        
+            td {
+                &.fc-widget-content {
+                    border: $panelContentBorder;
+                    color: $panelContentTextColor;
+                }
+        
+                &.fc-head-container {
+                    border: $panelHeaderBorder;
+                }
+            }
+
+            .fc-view {
+                background: $panelContentBg;
+            }
+        
+            .fc-row {
+                border-right: $panelHeaderBorder;
+            }
+        
+            .fc-event {
+                background: $fullCalendarEventBg;
+                border: $fullCalendarEventBorder;
+                color: $fullCalendarEventTextColor;
+            }
+
+            .fc-divider {
+                background: $panelHeaderBg;
+                border: $panelHeaderBorder;
+            }
+        }
+
+        .fc-toolbar {
+            .fc-button {
+                color: $buttonTextColor;
+                background: $buttonBg;
+                border: $buttonBorder;
+                font-size: $fontSize;
+                transition: $formElementTransition;
+                border-radius: $borderRadius;
+                display: flex;
+                align-items: center;
+
+                &:enabled:hover {
+                    background: $buttonHoverBg;
+                    color: $buttonTextHoverColor;
+                    border-color: $buttonHoverBorderColor;
+                }
+
+                &:enabled:active {
+                    background: $buttonActiveBg;
+                    color: $buttonTextActiveColor;
+                    border-color: $buttonActiveBorderColor;
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+
+                .fc-icon-chevron-left {
+                    font-family: 'PrimeIcons' !important;
+                    text-indent: 0;
+                    @include icon_override("\e900");
+                    font-size: $primeIconFontSize;
+                }
+
+                .fc-icon-chevron-right {
+                    font-family: 'PrimeIcons' !important;
+                    text-indent: 0;
+                    @include icon_override("\e901");
+                    font-size: $primeIconFontSize;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+
+                &.fc-dayGridMonth-button,
+                &.fc-timeGridWeek-button,
+                &.fc-timeGridDay-button {
+                    background: $toggleButtonBg;
+                    border: $toggleButtonBorder;
+                    color: $toggleButtonTextColor;
+                    transition: $formElementTransition;
+
+                    &:hover {
+                        background: $toggleButtonHoverBg;
+                        border-color: $toggleButtonHoverBorderColor;
+                        color: $toggleButtonTextHoverColor;
+                    }
+
+                    &.fc-button-active {
+                        background: $toggleButtonActiveBg;
+                        border-color: $toggleButtonActiveBorderColor;
+                        color: $toggleButtonTextActiveColor;
+
+                        &:hover {
+                            background: $toggleButtonActiveHoverBg;
+                            border-color: $toggleButtonActiveHoverBorderColor;
+                            color: $toggleButtonTextActiveHoverColor;
+                        }
+                    }
+
+                    &:focus {
+                        @include focused();
+                        z-index: 1;
+                    }
+                }
+            }
+
+            .fc-button-group {
+                .fc-button {
+                    border-radius: 0;
+
+                    &:first-child {
+                        border-top-left-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+
+                    &:last-child {
+                        border-top-right-radius: $borderRadius;
+                        border-bottom-right-radius: $borderRadius;
+                    }
+                }
+            }
+        }
+    }
+
+    /* FullCalendar 5 */
+    &.fc-theme-standard {
+        .fc-view-harness {
+            .fc-scrollgrid {
+                border-color: $panelContentBorderColor;
+            }
+    
+            th {
+                background: $panelHeaderBg;
+                border-color: $panelHeaderBorderColor;
+                color: $panelHeaderTextColor;
+            }
+        
+            td {
+                color: $panelContentTextColor;
+                border-color: $panelContentBorderColor;
+            }
+    
+            .fc-view {
+                background: $panelContentBg;
+            }
+
+            .fc-popover {
+                background: none;
+                border: 0 none;
+
+                .fc-popover-header {
+                    border: $panelHeaderBorder;
+                    padding: $panelHeaderPadding;
+                    background: $panelHeaderBg;
+                    color: $panelHeaderTextColor;
+
+                    .fc-popover-close {
+                        opacity: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        overflow: hidden;
+                        font-family: 'PrimeIcons' !important;
+                        @include icon_override("\e90b");
+                        font-size: $primeIconFontSize;
+                        @include action-icon(false);
+                    }
+                }
+
+                .fc-popover-body {
+                    padding: $panelContentPadding;
+                    border: $panelContentBorder;
+                    background: $panelContentBg;
+                    color: $panelContentTextColor;
+                    border-top: 0 none;
+                }
+            }
+        
+            .fc-event {
+                &.fc-daygrid-block-event {
+                    color: $fullCalendarEventTextColor;
+                    background: $fullCalendarEventBg;
+                    border-color: $fullCalendarEventBorderColor;
+    
+                    .fc-event-main {
+                        color: $fullCalendarEventTextColor;
+                    }
+                }
+                
+                &.fc-daygrid-dot-event {
+                    .fc-daygrid-event-dot {
+                        background: $fullCalendarEventBg;
+                        border-color: $fullCalendarEventBorderColor;
+                    }
+    
+                    &:hover {
+                        background: $inputListItemHoverBg;
+                        color: $inputListItemTextHoverColor;
+                    }
+                }
+            }
+    
+            .fc-cell-shaded {
+                background: $panelHeaderBg;
+            }
+        }
+    
+        .fc-toolbar {
+            .fc-button {
+                color: $buttonTextColor;
+                background: $buttonBg;
+                border: $buttonBorder;
+                font-size: $fontSize;
+                transition: $formElementTransition;
+                border-radius: $borderRadius;
+    
+                &:enabled:hover {
+                    background: $buttonHoverBg;
+                    color: $buttonTextHoverColor;
+                    border-color: $buttonHoverBorderColor;
+                }
+    
+                &:enabled:active {
+                    background: $buttonActiveBg;
+                    color: $buttonTextActiveColor;
+                    border-color: $buttonActiveBorderColor;
+    
+                    &:focus {
+                        @include focused();
+                    }
+                }
+    
+                &:disabled {
+                    opacity: $disabledOpacity;
+                    color: $buttonTextColor;
+                    background: $buttonBg;
+                    border: $buttonBorder;
+                }
+    
+                .fc-icon-chevron-left {
+                    font-family: 'PrimeIcons' !important;
+                    text-indent: 0;
+                    @include icon_override("\e900");
+                    font-size: $primeIconFontSize;
+                }
+    
+                .fc-icon-chevron-right {
+                    font-family: 'PrimeIcons' !important;
+                    text-indent: 0;
+                    @include icon_override("\e901");
+                    font-size: $primeIconFontSize;
+                }
+    
+                &:focus {
+                    @include focused();
+                }
+    
+                &.fc-dayGridMonth-button,
+                &.fc-timeGridWeek-button,
+                &.fc-timeGridDay-button {
+                    background: $toggleButtonBg;
+                    border: $toggleButtonBorder;
+                    color: $toggleButtonTextColor;
+                    transition: $formElementTransition;
+    
+                    &:hover {
+                        background: $toggleButtonHoverBg;
+                        border-color: $toggleButtonHoverBorderColor;
+                        color: $toggleButtonTextHoverColor;
+                    }
+    
+                    &.fc-button-active {
+                        background: $toggleButtonActiveBg;
+                        border-color: $toggleButtonActiveBorderColor;
+                        color: $toggleButtonTextActiveColor;
+    
+                        &:hover {
+                            background: $toggleButtonActiveHoverBg;
+                            border-color: $toggleButtonActiveHoverBorderColor;
+                            color: $toggleButtonTextActiveHoverColor;
+                        }
+                    }
+    
+                    &:not(:disabled) {
+                        &:focus {
+                            @include focused();
+                            z-index: 1;
+                        }
+                    }
+                }
+            }
+    
+            .fc-button-group {
+                .fc-button {
+                    border-radius: 0;
+    
+                    &:first-child {
+                        border-top-left-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+    
+                    &:last-child {
+                        border-top-right-radius: $borderRadius;
+                        border-bottom-right-radius: $borderRadius;
+                    }
+                }
+            }
+        }
+
+        .fc-highlight {
+            color: $highlightTextColor;
+            background: $highlightBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/data/_orderlist.scss b/theme-base/components/data/_orderlist.scss
new file mode 100644
index 0000000..783dace
--- /dev/null
+++ b/theme-base/components/data/_orderlist.scss
@@ -0,0 +1,80 @@
+.p-orderlist {
+    .p-orderlist-controls {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-orderlist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-orderlist-filter-container {
+        padding: $panelHeaderPadding;
+        background: $panelContentBg;
+        border: $panelHeaderBorder;
+        border-bottom: 0 none;
+        
+        .p-orderlist-filter-input {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-orderlist-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-orderlist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-orderlist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: transform $transitionDuration, $listItemTransition;
+
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    &.p-orderlist-striped {
+        .p-orderlist-list {
+            .p-orderlist-item:nth-child(even) {
+                background: $panelContentEvenRowBg;
+
+                &:hover {
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/data/_organizationchart.scss b/theme-base/components/data/_organizationchart.scss
new file mode 100644
index 0000000..507e0c9
--- /dev/null
+++ b/theme-base/components/data/_organizationchart.scss
@@ -0,0 +1,50 @@
+.p-organizationchart {
+    .p-organizationchart-node-content {
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+        }
+
+        &.p-highlight {
+            background: $highlightBg;
+            color: $highlightTextColor;
+
+            .p-node-toggler {
+                i {
+                    color: darken($highlightBg, 25%);
+                }
+            }
+        }
+    }
+
+    .p-organizationchart-line-down {
+        background: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-left {
+        border-right: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-top {
+        border-top: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-node-content {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $panelContentPadding;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        background: inherit;
+        color: inherit;
+        border-radius: 50%;
+
+        &:focus {
+            @include focused();
+        }
+    }
+}
diff --git a/theme-base/components/data/_paginator.scss b/theme-base/components/data/_paginator.scss
new file mode 100644
index 0000000..dab6bbc
--- /dev/null
+++ b/theme-base/components/data/_paginator.scss
@@ -0,0 +1,91 @@
+.p-paginator {
+    background: $paginatorBg;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $paginatorElementBorderRadius;
+        border-bottom-left-radius: $paginatorElementBorderRadius;
+    }
+    
+    .p-paginator-last {
+        border-top-right-radius: $paginatorElementBorderRadius;
+        border-bottom-right-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-page-input {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+
+        .p-inputtext {
+            max-width: $paginatorElementWidth;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: $highlightBg;
+                border-color: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}
diff --git a/theme-base/components/data/_picklist.scss b/theme-base/components/data/_picklist.scss
new file mode 100644
index 0000000..98d2134
--- /dev/null
+++ b/theme-base/components/data/_picklist.scss
@@ -0,0 +1,68 @@
+.p-picklist {
+    .p-picklist-buttons {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-picklist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-picklist-filter-container {
+        padding: $panelHeaderPadding;
+        background: $panelContentBg;
+        border: $panelHeaderBorder;
+        border-bottom: 0 none;
+
+        .p-picklist-filter-input {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-picklist-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-picklist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-picklist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: transform $transitionDuration, $listItemTransition;
+
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/data/_timeline.scss b/theme-base/components/data/_timeline.scss
new file mode 100644
index 0000000..5767491
--- /dev/null
+++ b/theme-base/components/data/_timeline.scss
@@ -0,0 +1,38 @@
+.p-timeline {
+    .p-timeline-event-marker {
+        border: $timelineEventMarkerBorder; 
+        border-radius: $timelineEventMarkerBorderRadius;
+        width: $timelineEventMarkerWidth;
+        height: $timelineEventMarkerHeight;
+        background-color: $timelineEventMarkerBackground;
+    }
+
+    .p-timeline-event-connector {
+        background-color: $timelineEventColor;
+    }
+
+    &.p-timeline-vertical {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineVerticalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            width: $timelineEventConnectorSize;
+        }
+    }
+
+    &.p-timeline-horizontal {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineHorizontalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            height: $timelineEventConnectorSize;
+        }
+    }
+}
+
+
+
diff --git a/theme-base/components/data/_tree.scss b/theme-base/components/data/_tree.scss
new file mode 100644
index 0000000..a197363
--- /dev/null
+++ b/theme-base/components/data/_tree.scss
@@ -0,0 +1,97 @@
+.p-tree {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $panelContentPadding;
+    border-radius: $borderRadius;
+
+    .p-tree-container {
+        .p-treenode {
+            padding: $treeNodePadding;
+
+            .p-treenode-content {
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+                padding: $treeNodeContentPadding;
+
+                .p-tree-toggler {
+                    margin-right: $inlineSpacing;
+                    @include action-icon();
+                }
+
+                .p-treenode-icon {
+                    margin-right: $inlineSpacing;
+                    color: $treeNodeIconColor;
+                }
+
+                .p-checkbox {
+                    margin-right: $inlineSpacing;
+
+                    .p-indeterminate {
+                        .p-checkbox-icon {
+                            color: $textColor;
+                        }
+                    }
+                }
+
+                &:focus {
+                    @include focused-listitem();
+                }
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+
+                    .p-tree-toggler,
+                    .p-treenode-icon {
+                        color: $highlightTextColor;
+
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+
+                &.p-treenode-dragover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-tree-filter-container {
+        margin-bottom: $inlineSpacing;
+
+        .p-tree-filter {
+            width: 100%;
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-tree-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-treenode-children {
+        padding: $treeNodeChildrenPadding;
+    }
+
+    .p-tree-loading-icon {
+        font-size: $loadingIconFontSize;
+    }
+
+    .p-treenode-droppoint {
+        height: $inlineSpacing;
+
+        &.p-treenode-droppoint-active {
+            background: scale-color($highlightBg, $lightness: -20%);
+        }
+    }
+}
diff --git a/theme-base/components/data/_treetable.scss b/theme-base/components/data/_treetable.scss
new file mode 100644
index 0000000..f07f793
--- /dev/null
+++ b/theme-base/components/data/_treetable.scss
@@ -0,0 +1,247 @@
+.p-treetable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+   .p-treetable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-treetable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-treetable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-treetable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        outline-color: $focusOutlineColor;
+
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-treetable-toggler {
+                    @include action-icon();
+                    margin-right: $inlineSpacing;
+                    
+                    & + .p-checkbox {
+                        margin-right: $inlineSpacing;
+                        
+                        .p-indeterminate {
+                            .p-checkbox-icon {
+                                color: $textColor;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:focus {
+                outline: .15rem solid $focusOutlineColor;
+                outline-offset: -.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+
+                .p-treetable-toggler {
+                    color: $highlightTextColor;
+
+                    &:hover {
+                        color: $highlightTextColor;
+                    }
+                    
+                }
+            }
+        }
+    }
+
+    &.p-treetable-selectable,
+    &.p-treetable-hoverable-rows {
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+
+            .p-treetable-toggler {
+                color: $tableBodyRowTextHoverColor;
+            }
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-treetable-scrollable-header,
+    .p-treetable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    .p-treetable-loading-icon {
+        font-size: $loadingIconFontSize;
+    }
+
+    &.p-treetable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-treetable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-treetable-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-thead {
+            > tr {
+                > th {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+    }
+
+    &.p-treetable-sm {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $scaleSM);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-treetable-lg {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}
diff --git a/theme-base/components/file/_fileupload.scss b/theme-base/components/file/_fileupload.scss
new file mode 100644
index 0000000..9632fe4
--- /dev/null
+++ b/theme-base/components/file/_fileupload.scss
@@ -0,0 +1,41 @@
+.p-fileupload {
+    .p-fileupload-buttonbar {
+        background: $panelHeaderBg;
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+        gap: $inlineSpacing;
+        
+        .p-button {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    .p-fileupload-content {
+        background: $panelContentBg;
+        padding: $fileUploadContentPadding;
+        border: $panelContentBorder;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-progressbar {
+        height: $fileUploadProgressBarHeight;
+    }
+
+    .p-fileupload-row {
+        > div {
+            padding: $tableBodyCellPadding;
+        }
+    }
+
+    &.p-fileupload-advanced {
+        .p-message {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/theme-base/components/input/_autocomplete.scss b/theme-base/components/input/_autocomplete.scss
new file mode 100644
index 0000000..98f62ce
--- /dev/null
+++ b/theme-base/components/input/_autocomplete.scss
@@ -0,0 +1,93 @@
+@use 'sass:math';
+
+.p-autocomplete {
+    .p-autocomplete-loader {
+        right: nth($inputPadding, 2); 
+    }
+
+    &.p-autocomplete-dd {
+        .p-autocomplete-loader {
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+        }
+    }
+    
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+
+        &:not(.p-disabled):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .p-autocomplete-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+            
+            input {
+                font-family: $fontFamily;
+                font-size: $fontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+
+        .p-autocomplete-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $highlightBg;
+            color: $highlightTextColor;
+            border-radius: $borderRadius;
+
+            .p-autocomplete-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-autocomplete-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-autocomplete-items {
+        padding: $inputListPadding;
+
+        .p-autocomplete-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+
+        .p-autocomplete-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_calendar.scss b/theme-base/components/input/_calendar.scss
new file mode 100644
index 0000000..e3e1da9
--- /dev/null
+++ b/theme-base/components/input/_calendar.scss
@@ -0,0 +1,246 @@
+.p-calendar {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-datepicker {
+    padding: $calendarPadding;
+    background: $calendarInlineBg;
+    color: $calendarTextColor;
+    border: $calendarBorder;
+    border-radius: $borderRadius;
+
+    &:not(.p-datepicker-inline) {
+        background: $calendarBg;
+        border: $calendarOverlayBorder;
+        box-shadow: $inputOverlayShadow;
+
+        .p-datepicker-header {
+            background: $calendarHeaderBg;
+        }
+    }
+
+    .p-datepicker-header {
+        padding: $calendarHeaderPadding;
+        color: $calendarHeaderTextColor;
+        background: $calendarInlineHeaderBg;
+        font-weight: $calendarHeaderFontWeight;
+        margin: $inputListHeaderMargin;
+        border-bottom: $calendarHeaderBorder;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            @include action-icon();
+        }
+
+        .p-datepicker-title {
+            line-height: $actionIconHeight;
+
+            .p-datepicker-year,
+            .p-datepicker-month {
+                color: $calendarHeaderTextColor;
+                transition: $actionIconTransition;
+                font-weight: $calendarHeaderFontWeight;
+                padding: $calendarHeaderCellPadding;
+
+                &:enabled:hover {
+                    color: $calendarMonthYearHeaderHoverTextColor;
+                }
+            }
+
+            .p-datepicker-month {
+                margin-right: $inlineSpacing;
+            }
+        }
+    }
+
+    table {
+        font-size: $fontSize;
+        margin: $calendarTableMargin;
+
+        th {
+            padding: $calendarHeaderCellPadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+            }
+        }
+
+        td {
+            padding: $calendarCellDatePadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+                border-radius: $calendarCellDateBorderRadius;
+                transition: $listItemTransition;
+                border: $calendarCellDateBorder;
+
+                &.p-highlight {
+                    color: $highlightTextColor;
+                    background: $highlightBg;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+
+            &.p-datepicker-today {
+                > span {
+                    background: $calendarCellDateTodayBg;
+                    color: $calendarCellDateTodayTextColor;
+                    border-color: $calendarCellDateTodayBorderColor;
+
+                    &.p-highlight {
+                        color: $highlightTextColor;
+                        background: $highlightBg;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        padding: $calendarButtonBarPadding;
+        border-top: $divider;
+
+        .p-button {
+            width: auto;
+        }
+    }
+
+    .p-timepicker {
+        border-top: $divider;
+        padding: $calendarTimePickerPadding;
+
+        button {
+            @include action-icon();
+
+            &:last-child {
+                margin-top: .2em;
+            }
+        }
+
+        span {
+            font-size: $calendarTimePickerTimeFontSize;
+        }
+
+        > div {
+            padding: $calendarTimePickerElementPadding;
+        }
+    }
+
+    &.p-datepicker-timeonly {
+        .p-timepicker {
+            border-top: 0 none;
+        }
+    }
+
+    .p-monthpicker {
+        margin: $calendarTableMargin;
+
+        .p-monthpicker-month {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    .p-yearpicker {
+        margin: $calendarTableMargin;
+
+        .p-yearpicker-year {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    &.p-datepicker-multiple-month {
+        .p-datepicker-group {
+            border-left: $divider;
+            padding-right: $calendarPadding;
+            padding-left: $calendarPadding;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &:first-child {
+                padding-left: 0;
+            }
+
+            &:last-child {
+                padding-right: 0;
+                border-left: 0 none;            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        table {
+            td {
+                span:not(.p-highlight):not(.p-disabled) {
+                    &:hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-monthpicker {
+            .p-monthpicker-month {
+                &:not(.p-disabled) {
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-yearpicker {
+            .p-yearpicker-year {
+                &:not(.p-disabled) {
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+@media screen and (max-width: $calendarBreakpoint) {
+    .p-datepicker {
+        table {
+            th, td {
+                padding: $calendarCellDatePaddingSM;
+            }
+        }
+    }
+}
diff --git a/theme-base/components/input/_cascadeselect.scss b/theme-base/components/input/_cascadeselect.scss
new file mode 100644
index 0000000..3e16c87
--- /dev/null
+++ b/theme-base/components/input/_cascadeselect.scss
@@ -0,0 +1,98 @@
+.p-cascadeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-cascadeselect-label {
+        background: transparent;
+        border: 0 none;
+        padding: $inputPadding;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-cascadeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-cascadeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-cascadeselect-items {
+        padding: $inputListPadding;
+
+        .p-cascadeselect-item {
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
+
+                &:focus {
+                    @include focused-listitem();
+                }
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            .p-cascadeselect-group-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-cascadeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
diff --git a/theme-base/components/input/_checkbox.scss b/theme-base/components/input/_checkbox.scss
new file mode 100644
index 0000000..b3099f4
--- /dev/null
+++ b/theme-base/components/input/_checkbox.scss
@@ -0,0 +1,87 @@
+.p-checkbox {
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+        }
+
+        &.p-highlight {
+            border-color: $checkboxActiveBorderColor;
+            background: $checkboxActiveBg;
+
+            &:not(.p-disabled):hover {
+                border-color: $checkboxActiveHoverBorderColor;
+                background: $checkboxActiveHoverBg;
+                color: $checkboxIconActiveHoverColor;
+            }
+        }
+    }
+
+    &:not(.p-checkbox-disabled) {
+        .p-checkbox-box {
+            &:hover {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-focus {
+                @include focused-input();
+            }
+
+            &.p-highlight:hover {    
+                border-color: $checkboxActiveHoverBorderColor;
+                background: $checkboxActiveHoverBg;
+                color: $checkboxIconActiveHoverColor;
+            }
+        }
+    }
+
+    &.p-invalid > .p-checkbox-box {
+        @include invalid-input();
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+
+            &.p-highlight {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $inputFilledHoverBg;
+                }
+        
+                &.p-highlight:hover {    
+                    background: $checkboxActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+    .p-highlight {
+        .p-checkbox {
+            .p-checkbox-box {
+                border-color: $checkboxIconActiveColor;
+            }
+        }
+    }
+} 
diff --git a/theme-base/components/input/_chips.scss b/theme-base/components/input/_chips.scss
new file mode 100644
index 0000000..f61315c
--- /dev/null
+++ b/theme-base/components/input/_chips.scss
@@ -0,0 +1,43 @@
+@use 'sass:math';
+
+.p-chips {
+    .p-chips-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+
+        &:not(.p-disabled):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .p-chips-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-chips-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+
+        .p-chips-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+                
+            input {
+                font-family: $fontFamily;
+                font-size: $fontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
diff --git a/theme-base/components/input/_colorpicker.scss b/theme-base/components/input/_colorpicker.scss
new file mode 100644
index 0000000..be6d658
--- /dev/null
+++ b/theme-base/components/input/_colorpicker.scss
@@ -0,0 +1,18 @@
+.p-colorpicker-preview  {
+    width: $colorPickerPreviewWidth;
+    height: $colorPickerPreviewHeight;
+}
+
+.p-colorpicker-panel {
+    background: $colorPickerBg;
+    border: $colorPickerBorder;
+
+    .p-colorpicker-color-handle,
+    .p-colorpicker-hue-handle {
+        border-color: $colorPickerHandleColor;
+    }
+}
+
+.p-colorpicker-overlay-panel {
+    box-shadow: $inputOverlayShadow;
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_dropdown.scss b/theme-base/components/input/_dropdown.scss
new file mode 100644
index 0000000..1d33de4
--- /dev/null
+++ b/theme-base/components/input/_dropdown.scss
@@ -0,0 +1,146 @@
+.p-dropdown {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-dropdown-clearable {
+        .p-dropdown-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    .p-dropdown-label {
+        background: transparent;
+        border: 0 none;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-dropdown-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dropdown-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-dropdown-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-dropdown-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dropdown-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
+        }
+
+        .p-dropdown-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+
+        .p-dropdown-clearable-filter {
+            .p-dropdown-filter {
+                padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
+                margin-right: -2 * (nth($inputPadding, 2) + $primeIconFontSize);
+            }
+    
+            .p-dropdown-filter-clear-icon {
+                right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
+            }
+        }
+    }
+
+    .p-dropdown-items {
+        padding: $inputListPadding;
+
+        .p-dropdown-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+        }
+
+        .p-dropdown-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-dropdown-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-dropdown {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+
+            .p-inputtext {
+                background-color: transparent;
+            }
+        }
+    }
+}
diff --git a/theme-base/components/input/_editor.scss b/theme-base/components/input/_editor.scss
new file mode 100644
index 0000000..b10b2fa
--- /dev/null
+++ b/theme-base/components/input/_editor.scss
@@ -0,0 +1,122 @@
+.p-editor-container {
+    .p-editor-toolbar {
+        background: $editorToolbarBg;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorToolbarBorder;
+
+            .ql-stroke {
+                stroke: $editorToolbarIconColor;
+            }
+    
+            .ql-fill {
+                fill: $editorToolbarIconColor;
+            }
+    
+            .ql-picker {
+                .ql-picker-label {
+                    border: 0 none;
+                    color: $editorToolbarIconColor;
+
+                    &:hover {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+                }
+
+                &.ql-expanded {
+                    .ql-picker-label {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+
+                    .ql-picker-options {
+                        background: $inputOverlayBg;
+                        border:$inputOverlayBorder;
+                        box-shadow:$inputOverlayShadow;
+                        border-radius: $borderRadius;
+                        padding: $inputListPadding;
+
+                        .ql-picker-item {
+                            color: $inputListItemTextColor;
+                            
+                            &:hover {
+                                color: $inputListItemTextHoverColor;
+                                background: $inputListItemHoverBg;
+                            }
+                        }
+                    }
+
+                    &:not(.ql-icon-picker) {
+                        .ql-picker-item {
+                            padding: $inputListItemPadding;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .p-editor-content {
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorContentBorder;
+        }
+
+        .ql-editor {
+            background: $inputBg;
+            color: $inputTextColor;
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .ql-snow.ql-toolbar button:hover,
+    .ql-snow.ql-toolbar button:focus {
+        color: $editorToolbarIconHoverColor;
+
+        .ql-stroke {
+            stroke: $editorToolbarIconHoverColor;
+        }
+
+        .ql-fill {
+            fill: $editorToolbarIconHoverColor;
+        }
+    }
+
+    .ql-snow.ql-toolbar button.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+        color: $editorIconActiveColor;
+
+        .ql-stroke {
+            stroke: $editorIconActiveColor;
+        }
+
+        .ql-fill {
+            fill: $editorIconActiveColor;
+        }
+
+        .ql-picker-label {
+            color: $editorIconActiveColor;
+        }
+    }
+}
diff --git a/theme-base/components/input/_inputgroup.scss b/theme-base/components/input/_inputgroup.scss
new file mode 100644
index 0000000..ab4f8a0
--- /dev/null
+++ b/theme-base/components/input/_inputgroup.scss
@@ -0,0 +1,74 @@
+.p-inputgroup-addon {
+    background: $inputGroupBg;
+    color: $inputGroupTextColor;
+    border-top: $inputBorder;
+    border-left: $inputBorder;
+    border-bottom: $inputBorder;
+    padding: $inputPadding;
+    min-width: $inputGroupAddOnMinWidth;
+
+    &:last-child {
+        border-right: $inputBorder;
+    }
+}
+
+.p-inputgroup {
+    > .p-component,
+    > .p-inputwrapper > .p-inputtext,
+    > .p-float-label > .p-component {
+        border-radius: 0;
+        margin: 0;
+
+        + .p-inputgroup-addon {
+            border-left: 0 none;
+        }
+
+        &:focus {
+            z-index: 1;
+
+            ~ label {
+                z-index: 1;
+            }
+        }
+    }
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child,
+.p-inputgroup > .p-inputwrapper:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child,
+.p-inputgroup > .p-inputwrapper:last-child, 
+.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-fluid {
+    .p-inputgroup {
+        .p-button {
+            width: auto;
+
+            &.p-button-icon-only {
+                width: $buttonIconOnlyWidth;
+            }
+        }
+    }
+}
diff --git a/theme-base/components/input/_inputnumber.scss b/theme-base/components/input/_inputnumber.scss
new file mode 100644
index 0000000..aa8beb7
--- /dev/null
+++ b/theme-base/components/input/_inputnumber.scss
@@ -0,0 +1,5 @@
+.p-inputnumber {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_inputswitch.scss b/theme-base/components/input/_inputswitch.scss
new file mode 100644
index 0000000..dba7af2
--- /dev/null
+++ b/theme-base/components/input/_inputswitch.scss
@@ -0,0 +1,62 @@
+@use 'sass:math';
+
+.p-inputswitch {
+    width: $inputSwitchWidth;
+    height: $inputSwitchHeight;
+
+    .p-inputswitch-slider {
+        background: $inputSwitchSliderOffBg;
+        transition: $formElementTransition;
+        border-radius: $inputSwitchBorderRadius;
+
+        &:before {
+            background: $inputSwitchHandleOffBg;
+            width: $inputSwitchHandleWidth;
+            height: $inputSwitchHandleHeight;
+            left: $inputSwitchSliderPadding;
+            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+            border-radius: $inputSwitchHandleBorderRadius;
+            transition-duration: $transitionDuration;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider:before {
+            transform: translateX($inputSwitchHandleWidth);
+        }
+    }
+
+    &.p-focus {
+        .p-inputswitch-slider {
+            @include focused();
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOffHoverBg;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOnBg;
+
+            &:before {
+                background: $inputSwitchHandleOnBg;
+             }
+        }
+
+        &:not(.p-disabled):hover {
+            .p-inputswitch-slider {
+                background: $inputSwitchSliderOnHoverBg;
+            }
+        }
+    }
+
+    &.p-invalid {
+        .p-inputswitch-slider {
+            @include invalid-input();
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_inputtext.scss b/theme-base/components/input/_inputtext.scss
new file mode 100644
index 0000000..721d80d
--- /dev/null
+++ b/theme-base/components/input/_inputtext.scss
@@ -0,0 +1,101 @@
+.p-inputtext {
+    font-family: $fontFamily;
+    font-size: $inputTextFontSize;
+    color: $inputTextColor;
+    background: $inputBg;
+    padding: $inputPadding;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    appearance: none;
+    border-radius: $borderRadius;
+
+    &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        @include focused-input();
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+
+    &.p-inputtext-sm {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+
+    &.p-inputtext-lg {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
+
+.p-float-label > label {
+    left: nth($inputPadding, 2);
+    color: $inputPlaceholderTextColor;
+    transition-duration: $transitionDuration;
+}
+
+.p-float-label > label.p-error {
+    color: $errorColor;
+}
+
+.p-input-icon-left > i:first-of-type,
+.p-input-icon-left > svg:first-of-type,
+.p-input-icon-left > .p-input-prefix {
+    left: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-right > i:last-of-type,
+.p-input-icon-right > svg:last-of-type,
+.p-input-icon-right > .p-input-suffix {
+    right: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-right > .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+@include placeholder {
+    color: $inputPlaceholderTextColor
+};
+
+.p-input-filled {
+    .p-inputtext {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-inputtext-sm {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+}
+
+.p-inputtext-lg {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_listbox.scss b/theme-base/components/input/_listbox.scss
new file mode 100644
index 0000000..9b0e78f
--- /dev/null
+++ b/theme-base/components/input/_listbox.scss
@@ -0,0 +1,74 @@
+.p-listbox {
+    background: $inputListBg;
+    color: $inputListTextColor;
+    border: $inputListBorder;
+    border-radius: $borderRadius;
+
+    .p-listbox-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputListHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-listbox-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-listbox-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-listbox-list {
+        padding: $inputListPadding;
+
+        .p-listbox-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+        }
+
+        .p-listbox-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-listbox-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        .p-listbox-item {
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+        }
+    }
+
+    &.p-invalid {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_mention.scss b/theme-base/components/input/_mention.scss
new file mode 100644
index 0000000..21ccf32
--- /dev/null
+++ b/theme-base/components/input/_mention.scss
@@ -0,0 +1,31 @@
+.p-mention-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-mention-items {
+        padding: $inputListPadding;
+
+        .p-mention-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_multiselect.scss b/theme-base/components/input/_multiselect.scss
new file mode 100644
index 0000000..d059bb0
--- /dev/null
+++ b/theme-base/components/input/_multiselect.scss
@@ -0,0 +1,177 @@
+@use 'sass:math';
+
+.p-multiselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-multiselect-clearable {
+        .p-multiselect-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    .p-multiselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-multiselect-chip {
+        .p-multiselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-multiselect-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    .p-multiselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-multiselect-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-multiselect {
+        &.p-multiselect-chip {
+            .p-multiselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+
+                &.p-multiselect-items-label {
+                    padding: $inputPadding;
+                }
+            }
+        }
+
+        &.p-multiselect-clearable {
+            .p-multiselect-label {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+        }
+    }
+}
+
+.p-multiselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-multiselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-multiselect-filter-container {
+            margin: 0 $inlineSpacing;
+
+            .p-inputtext {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+
+            .p-multiselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+        }
+
+        .p-multiselect-close {
+            @include action-icon();
+        }
+    }
+
+    .p-multiselect-items {
+        padding: $inputListPadding;
+
+        .p-multiselect-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-multiselect-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-multiselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-multiselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_password.scss b/theme-base/components/input/_password.scss
new file mode 100644
index 0000000..c226e4e
--- /dev/null
+++ b/theme-base/components/input/_password.scss
@@ -0,0 +1,33 @@
+.p-password {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-password-panel {
+    padding: $panelContentPadding;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $inputOverlayShadow;
+    border-radius: $borderRadius;
+
+    .p-password-meter {
+        margin-bottom: $inlineSpacing;
+        background: $passwordMeterBg;
+
+        .p-password-strength {
+            &.weak {
+                background: $passwordWeakBg;
+            }
+
+            &.medium {
+                background: $passwordMediumBg;
+            }
+
+            &.strong {
+                background: $passwordStrongBg;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_radiobutton.scss b/theme-base/components/input/_radiobutton.scss
new file mode 100644
index 0000000..157b5df
--- /dev/null
+++ b/theme-base/components/input/_radiobutton.scss
@@ -0,0 +1,78 @@
+.p-radiobutton {
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+
+    .p-radiobutton-box {
+        border: $radiobuttonBorder;
+        background: $inputBg;
+        width: $radiobuttonWidth;
+        height: $radiobuttonHeight;
+        color: $textColor;
+        border-radius: 50%;
+        transition: $formElementTransition;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .p-radiobutton-icon {
+            width: $radiobuttonIconSize;
+            height: $radiobuttonIconSize;
+            transition-duration: $transitionDuration;
+            background-color: $radiobuttonIconActiveColor;
+        }
+
+        &.p-highlight {
+            border-color: $radiobuttonActiveBorderColor;
+            background: $radiobuttonActiveBg;
+
+            &:not(.p-disabled):hover {
+                border-color: $radiobuttonActiveHoverBorderColor;
+                background: $radiobuttonActiveHoverBg;
+                color: $radiobuttonIconActiveHoverColor;
+            }
+        }
+    }
+
+    &.p-invalid > .p-radiobutton-box {
+        @include invalid-input();
+    }
+
+    &:focus {
+        outline: 0 none;
+    }
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputFilledHoverBg;
+            }
+
+            &.p-highlight {
+                background: $radiobuttonActiveBg;
+    
+                &:not(.p-disabled):hover {
+                    background: $radiobuttonActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+    .p-highlight {
+        .p-radiobutton {
+            .p-radiobutton-box {
+                border-color: $radiobuttonIconActiveColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_rating.scss b/theme-base/components/input/_rating.scss
new file mode 100644
index 0000000..452a924
--- /dev/null
+++ b/theme-base/components/input/_rating.scss
@@ -0,0 +1,55 @@
+@use 'sass:math';
+
+.p-rating {
+    gap: $inlineSpacing;
+
+    .p-rating-item {
+        .p-rating-icon {
+            color: $ratingStarIconOffColor;
+            transition: $formElementTransition;   
+            font-size: $ratingIconFontSize;
+    
+            &.p-rating-cancel {
+                color: $ratingCancelIconColor;
+            }
+        }
+
+        &:focus {
+            @include focused();
+        }
+
+        &.p-rating-item-active {
+            .p-rating-icon {
+                color: $ratingStarIconOnColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                .p-rating-icon {
+                    color: $ratingStarIconHoverColor;
+
+                    &.p-rating-cancel {
+                        color: $ratingCancelIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+    .p-highlight {
+        .p-rating {
+            .p-rating-item {
+                &.p-rating-item-active {
+                    .p-rating-icon {
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/theme-base/components/input/_selectbutton.scss b/theme-base/components/input/_selectbutton.scss
new file mode 100644
index 0000000..dfcabe6
--- /dev/null
+++ b/theme-base/components/input/_selectbutton.scss
@@ -0,0 +1,50 @@
+.p-selectbutton {
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+
+            &:hover {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+                color: $toggleButtonTextActiveHoverColor;
+
+                .p-button-icon-left,
+                .p-button-icon-right {
+                    color: $toggleButtonIconActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_slider.scss b/theme-base/components/input/_slider.scss
new file mode 100644
index 0000000..c752cd3
--- /dev/null
+++ b/theme-base/components/input/_slider.scss
@@ -0,0 +1,49 @@
+@use 'sass:math';
+
+.p-slider {
+    background: $sliderBg;
+    border: $sliderBorder;
+    border-radius: $borderRadius;
+
+    &.p-slider-horizontal {
+        height: $sliderHorizontalHeight;
+
+        .p-slider-handle {
+            margin-top: math.div(-1 * $sliderHandleHeight, 2);
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+        }
+    }
+
+    &.p-slider-vertical {
+        width: $sliderVerticalWidth;
+
+        .p-slider-handle {
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+            margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
+        }
+    }
+
+    .p-slider-handle {
+        height: $sliderHandleHeight;
+        width: $sliderHandleWidth;
+        background: $sliderHandleBg;
+        border: $sliderHandleBorder;
+        border-radius: $sliderHandleBorderRadius;
+        transition: $formElementTransition;
+
+        &:focus {
+            @include focused();
+        }
+    }
+
+    .p-slider-range {
+        background: $sliderRangeBg;
+    }
+
+    &:not(.p-disabled) {
+        .p-slider-handle:hover {
+            background: $sliderHandleHoverBg;
+            border-color: $sliderHandleHoverBorderColor;
+        }
+    }
+}
diff --git a/theme-base/components/input/_togglebutton.scss b/theme-base/components/input/_togglebutton.scss
new file mode 100644
index 0000000..b9c193f
--- /dev/null
+++ b/theme-base/components/input/_togglebutton.scss
@@ -0,0 +1,48 @@
+.p-togglebutton.p-button {
+    background: $toggleButtonBg;
+    border: $toggleButtonBorder;
+    color: $toggleButtonTextColor;
+    transition: $formElementTransition;
+
+    .p-button-icon-left,
+    .p-button-icon-right {
+        color: $toggleButtonIconColor;
+    }
+
+    &:not(.p-disabled):not(.p-highlight):hover {
+        background: $toggleButtonHoverBg;
+        border-color: $toggleButtonHoverBorderColor;
+        color: $toggleButtonTextHoverColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconHoverColor;
+        }
+    }
+
+    &.p-highlight {
+        background: $toggleButtonActiveBg;
+        border-color: $toggleButtonActiveBorderColor;
+        color: $toggleButtonTextActiveColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconActiveColor;
+        }
+
+        &:hover {
+            background: $toggleButtonActiveHoverBg;
+            border-color: $toggleButtonActiveHoverBorderColor;
+            color: $toggleButtonTextActiveHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveHoverColor;
+            }
+        }
+    }
+    
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/input/_treeselect.scss b/theme-base/components/input/_treeselect.scss
new file mode 100644
index 0000000..3a11714
--- /dev/null
+++ b/theme-base/components/input/_treeselect.scss
@@ -0,0 +1,128 @@
+@use 'sass:math';
+
+.p-treeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-treeselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-treeselect-chip {
+        .p-treeselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+        }
+    }
+
+    .p-treeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+    
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-treeselect {
+        &.p-treeselect-chip {
+            .p-treeselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-treeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-treeselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-treeselect-filter-container {
+            margin-right: $inlineSpacing;
+
+            .p-treeselect-filter {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+    
+            .p-treeselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+    
+            &.p-treeselect-clearable-filter {
+                .p-treeselect-filter {
+                    padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
+                }
+        
+                .p-treeselect-filter-clear-icon {
+                    right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
+                }
+            }
+        }
+
+        .p-treeselect-close {
+            @include action-icon();
+        }
+    }
+
+    .p-treeselect-items-wrapper {
+        .p-tree {
+            border: 0 none;
+        }
+
+        .p-treeselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-treeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/menu/_breadcrumb.scss b/theme-base/components/menu/_breadcrumb.scss
new file mode 100644
index 0000000..7357654
--- /dev/null
+++ b/theme-base/components/menu/_breadcrumb.scss
@@ -0,0 +1,42 @@
+.p-breadcrumb {
+    background: $breadcrumbBg;
+    border: $breadcrumbBorder;
+    border-radius: $borderRadius;
+    padding: $breadcrumbPadding;
+
+    ul {
+        li {
+            .p-menuitem-link {
+                transition: $listItemTransition;
+                border-radius: $borderRadius;
+
+                &:focus {
+                    @include focused();
+                }
+
+                .p-menuitem-text {
+                    color: $breadcrumbItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbItemIconColor;
+                }
+            }
+
+            &.p-breadcrumb-chevron {
+                margin: 0 $inlineSpacing 0 $inlineSpacing;
+                color: $breadcrumbSeparatorColor;
+            }
+
+            &:last-child {
+                .p-menuitem-text {
+                    color: $breadcrumbLastItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbLastItemIconColor;
+                }
+            }
+        }
+    }
+}
diff --git a/theme-base/components/menu/_contextmenu.scss b/theme-base/components/menu/_contextmenu.scss
new file mode 100644
index 0000000..e78cda8
--- /dev/null
+++ b/theme-base/components/menu/_contextmenu.scss
@@ -0,0 +1,47 @@
+.p-contextmenu {
+    padding: $verticalMenuPadding;
+    background: $overlayMenuBg;
+    color: $menuTextColor;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem {
+        &.p-menuitem-active {
+            > .p-menuitem-link {
+                background: $menuitemActiveBg;
+
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-menu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+        transition: transform $transitionDuration;
+    }
+}
diff --git a/theme-base/components/menu/_dock.scss b/theme-base/components/menu/_dock.scss
new file mode 100644
index 0000000..c5f6614
--- /dev/null
+++ b/theme-base/components/menu/_dock.scss
@@ -0,0 +1,97 @@
+.p-dock {
+    .p-dock-list {
+        background: $dockBg;
+        border: $dockBorder;
+        padding: $dockPadding;
+        border-radius: $dockBorderRadius;
+    }
+    
+    .p-dock-item {
+        padding: $dockItemPadding;
+    }
+
+    .p-dock-action {
+        width: $dockActionWidth;
+        height: $dockActionHeight;
+    }
+    
+    &.p-dock-magnification {
+        &.p-dock-top,
+        &.p-dock-bottom {
+            .p-dock-item-second-prev,
+            .p-dock-item-second-next {
+                margin: 0 $dockSecondItemsMargin;
+            }
+
+            .p-dock-item-prev,
+            .p-dock-item-next {
+                margin: 0 $dockFirstItemsMargin;
+            }
+
+            .p-dock-item-current {
+                margin: 0 $dockCurrentItemMargin;
+            }
+        }
+
+        &.p-dock-left,
+        &.p-dock-right {
+            .p-dock-item-second-prev,
+            .p-dock-item-second-next {
+                margin: $dockSecondItemsMargin 0;
+            }
+            
+            .p-dock-item-prev,
+            .p-dock-item-next {
+                margin: $dockFirstItemsMargin 0;
+            }
+
+            .p-dock-item-current {
+                margin: $dockCurrentItemMargin 0;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .p-dock {
+        &.p-dock-top,
+        &.p-dock-bottom {
+            .p-dock-container {
+                overflow-x: auto;
+                width: 100%;
+
+                .p-dock-list {
+                    margin: 0 auto;
+                }
+            }
+        }
+
+        &.p-dock-left,
+        &.p-dock-right {
+            .p-dock-container {
+                overflow-y: auto;
+                height: 100%;
+
+                .p-dock-list {
+                    margin: auto 0;
+                }
+            }
+        }
+
+        &.p-dock-magnification {
+            &.p-dock-top,
+            &.p-dock-bottom,
+            &.p-dock-left,
+            &.p-dock-right {
+                .p-dock-item-second-prev,
+                .p-dock-item-second-next,
+                .p-dock-item-prev,
+                .p-dock-item-next,
+                .p-dock-item-current {
+                    transform: none;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/menu/_megamenu.scss b/theme-base/components/menu/_megamenu.scss
new file mode 100644
index 0000000..fa3e98a
--- /dev/null
+++ b/theme-base/components/menu/_megamenu.scss
@@ -0,0 +1,171 @@
+.p-megamenu {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-megamenu-root-list {  
+        > .p-menuitem {
+            > .p-menuitem-link {
+                @include horizontal-rootmenuitem-link();
+            }
+
+            &.p-menuitem-active {
+                > .p-menuitem-link,
+                > .p-menuitem-link:not(.p-disabled):hover {
+                    background: $horizontalMenuRootMenuitemActiveBg;
+            
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextActiveColor;
+                    }
+            
+                    .p-menuitem-icon {
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
+                    }
+                    
+                    .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    .p-megamenu-panel {
+        background: $overlayMenuBg;
+        color: $menuTextColor;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-megamenu-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $borderRadius; 
+        border-top-left-radius: $borderRadius; 
+    }
+
+    .p-megamenu-submenu {
+        padding: $verticalMenuPadding;
+        width: $menuWidth;
+
+        .p-menu-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+
+    .p-menuitem {
+        &.p-menuitem-active {
+            > .p-menuitem-link {
+                background: $menuitemActiveBg;
+
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+
+    &.p-megamenu-vertical {
+        width: $menuWidth;
+        padding: $verticalMenuPadding;
+    }
+
+    .p-megamenu-button {
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        color: $horizontalMenuRootMenuitemIconColor;
+        border-radius: $actionIconBorderRadius;
+        transition: $actionIconTransition;
+    
+        &:hover {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+            background: $horizontalMenuRootMenuitemHoverBg;
+        }
+    
+        &:focus {
+            @include focused();
+        }
+    }
+
+    .p-submenu-icon {
+        transition: transform $transitionDuration;
+    }
+
+    &.p-megamenu-mobile-active {
+        .p-megamenu-root-list {
+            padding: $verticalMenuPadding;
+            background: $overlayMenuBg;
+            border: $overlayMenuBorder;
+            box-shadow: $overlayMenuShadow;
+
+            .p-menu-separator {
+                border-top: $divider;
+                margin: $menuSeparatorMargin;
+            }
+
+            .p-submenu-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+
+            > .p-menuitem {
+                width: 100%;
+                position: static;
+
+                > .p-menuitem-link {
+                    @include menuitem-link();
+
+                    > .p-submenu-icon {
+                        margin-left: auto;
+                    }
+                }
+
+                &.p-menuitem-active {
+                    > .p-menuitem-link {
+                        > .p-submenu-icon {
+                            transform: rotate(-180deg);
+                        }
+                    }
+                }
+            }
+
+            .p-submenu-list {
+                width: 100%;
+                position: static;
+                box-shadow: none;
+                border: 0 none;
+
+                .p-submenu-icon {
+                    transition: transform $transitionDuration;
+                    transform: rotate(90deg);
+                }
+
+                .p-menuitem-active {
+                    > .p-menuitem-link {
+                        > .p-submenu-icon {
+                            transform: rotate(-90deg);
+                        }
+                    }
+                }
+            }
+
+            .p-menuitem {
+                width: 100%;
+                position: static;
+            }
+        }
+    }
+}
diff --git a/theme-base/components/menu/_menu.scss b/theme-base/components/menu/_menu.scss
new file mode 100644
index 0000000..1ca3351
--- /dev/null
+++ b/theme-base/components/menu/_menu.scss
@@ -0,0 +1,33 @@
+.p-menu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    &.p-menu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $submenuHeaderBorderRadius; 
+        border-top-left-radius: $submenuHeaderBorderRadius; 
+    }
+
+    .p-menu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+}
diff --git a/theme-base/components/menu/_menubar.scss b/theme-base/components/menu/_menubar.scss
new file mode 100644
index 0000000..4cd02ee
--- /dev/null
+++ b/theme-base/components/menu/_menubar.scss
@@ -0,0 +1,171 @@
+.p-menubar {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    .p-menubar-root-list {
+        > .p-menuitem {
+            > .p-menuitem-link {
+                @include horizontal-rootmenuitem-link();
+            }
+
+            &.p-menuitem-active {
+                > .p-menuitem-link,
+                > .p-menuitem-link:not(.p-disabled):hover {
+                    background: $horizontalMenuRootMenuitemActiveBg;
+            
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextActiveColor;
+                    }
+            
+                    .p-menuitem-icon {
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
+                    }
+                    
+                    .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconActiveColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        width: $menuWidth;
+
+        .p-menu-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-icon {
+            font-size: $menuitemSubmenuIconFontSize;
+        }
+    }
+
+    .p-menuitem {
+        &.p-menuitem-active {
+            > .p-menuitem-link {
+                background: $menuitemActiveBg;
+
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .p-menubar {
+        position: relative;
+
+        .p-menubar-button {
+            display: flex;
+            width: $actionIconWidth;
+            height: $actionIconHeight;
+            color: $horizontalMenuRootMenuitemIconColor;
+            border-radius: $actionIconBorderRadius;
+            transition: $actionIconTransition;
+        
+            &:hover {
+                color: $horizontalMenuRootMenuitemIconHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+            }
+        
+            &:focus {
+                @include focused();
+            }
+        }
+
+        .p-menubar-root-list {
+            position: absolute;
+            display: none;
+            padding: $verticalMenuPadding;
+            background: $overlayMenuBg;
+            border: $overlayMenuBorder;
+            box-shadow: $overlayMenuShadow;
+            width: 100%;
+    
+            .p-menu-separator {
+                border-top: $divider;
+                margin: $menuSeparatorMargin;
+            }
+    
+            .p-submenu-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+
+            > .p-menuitem {
+                width: 100%;
+                position: static;
+
+                > .p-menuitem-link {
+                    @include menuitem-link();
+
+                    > .p-submenu-icon {
+                        margin-left: auto;
+                        transition: transform $transitionDuration;
+                    }
+                }
+
+                &.p-menuitem-active {
+                    > .p-menuitem-link {
+                        > .p-submenu-icon {
+                            transform: rotate(-180deg);
+                        }
+                    }
+                }
+            }
+
+            .p-submenu-list {
+                width: 100%;
+                position: static;
+                box-shadow: none;
+                border: 0 none;
+
+                .p-submenu-icon {
+                    transition: transform $transitionDuration;
+                    transform: rotate(90deg);
+                }
+
+                .p-menuitem-active {
+                    > .p-menuitem-link {
+                        > .p-submenu-icon {
+                            transform: rotate(-90deg);
+                        }
+                    }
+                }
+            }
+    
+            .p-menuitem {
+                width: 100%;
+                position: static;
+            }
+
+            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+        }
+
+        &.p-menubar-mobile-active .p-menubar-root-list {
+            display: flex;
+            flex-direction: column;
+            top: 100%;
+            left: 0;
+            z-index: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/menu/_panelmenu.scss b/theme-base/components/menu/_panelmenu.scss
new file mode 100644
index 0000000..fefc9d0
--- /dev/null
+++ b/theme-base/components/menu/_panelmenu.scss
@@ -0,0 +1,136 @@
+.p-panelmenu {
+    .p-panelmenu-header {
+        > a {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-panelmenu-icon {
+                margin-right: $inlineSpacing;
+            }
+
+            .p-menuitem-icon {
+                margin-right: $inlineSpacing;
+            }
+
+            &:focus {
+                @include focused();
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled) {
+            > a:hover {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            margin-bottom: 0;
+
+            > a {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(.p-disabled) {
+                > a {
+                    &:hover {
+                        border-color: $accordionHeaderActiveHoverBorderColor;
+                        background: $accordionHeaderActiveHoverBg;
+                        color: $accordionHeaderTextActiveHoverColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-panelmenu-content {
+        padding: $verticalMenuPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-menuitem {
+            .p-menuitem-link {
+                @include menuitem-link();
+
+                .p-panelmenu-icon {
+                    margin-right: $inlineSpacing;
+                }
+            }
+        }
+
+        .p-submenu-list:not(.p-panelmenu-root-submenu) {
+            padding: $treeNodeChildrenPadding;
+        }
+    }
+
+    .p-panelmenu-panel {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-panelmenu-header {
+                > a {
+                    border-radius: 0;
+                }
+            }
+
+            .p-panelmenu-content {
+                border-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-panelmenu-header {
+                    > a {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        > a {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-panelmenu-header {
+                    > a {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-panelmenu-header:not(.p-highlight) {
+                    > a {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+
+                .p-panelmenu-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+
+}
diff --git a/theme-base/components/menu/_slidemenu.scss b/theme-base/components/menu/_slidemenu.scss
new file mode 100644
index 0000000..3fec72c
--- /dev/null
+++ b/theme-base/components/menu/_slidemenu.scss
@@ -0,0 +1,55 @@
+.p-slidemenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    &.p-slidemenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu {
+        &.p-slidemenu-active {
+            > .p-slidemenu-link {
+                background: $menuitemActiveBg;
+
+                .p-slidemenu-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-slidemenu-icon, .p-slidemenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-slidemenu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-slidemenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+    }
+
+    .p-slidemenu-backward {
+        padding: $menuitemPadding;
+	    color: $menuitemTextColor;
+    }
+}
diff --git a/theme-base/components/menu/_steps.scss b/theme-base/components/menu/_steps.scss
new file mode 100644
index 0000000..a3f166b
--- /dev/null
+++ b/theme-base/components/menu/_steps.scss
@@ -0,0 +1,57 @@
+@use 'sass:math';
+
+.p-steps {
+
+    .p-steps-item {
+        .p-menuitem-link {
+            background: transparent;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+
+            .p-steps-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                z-index: 1;
+                border-radius: $stepsItemNumberBorderRadius;
+            }
+
+            .p-steps-title {
+                margin-top: $inlineSpacing;
+                color: $stepsItemTextColor;
+            }
+
+            &:not(.p-disabled):focus {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-steps-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-steps-title {
+                font-weight: $stepsItemActiveFontWeight;
+                color: $textColor;
+            }
+        }
+
+        &:before {
+            content:' ';
+            border-top: $divider;
+            width: 100%;
+            top: 50%;
+            left: 0;
+            display: block;
+            position: absolute;
+            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
+        }
+    }
+}
diff --git a/theme-base/components/menu/_tabmenu.scss b/theme-base/components/menu/_tabmenu.scss
new file mode 100644
index 0000000..d1ada01
--- /dev/null
+++ b/theme-base/components/menu/_tabmenu.scss
@@ -0,0 +1,50 @@
+.p-tabmenu {
+    .p-tabmenu-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        .p-tabmenuitem {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-menuitem-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+                height: calc(100% + #{-1 * nth($tabviewHeaderMargin, 3)});
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:not(.p-disabled):focus {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-menuitem-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-menuitem-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+}
diff --git a/theme-base/components/menu/_tieredmenu.scss b/theme-base/components/menu/_tieredmenu.scss
new file mode 100644
index 0000000..9b8e183
--- /dev/null
+++ b/theme-base/components/menu/_tieredmenu.scss
@@ -0,0 +1,51 @@
+.p-tieredmenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    &.p-tieredmenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-menuitem {
+        &.p-menuitem-active {
+            > .p-menuitem-link {
+                background: $menuitemActiveBg;
+
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-menu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+        transition: transform $transitionDuration;
+    }
+}
diff --git a/theme-base/components/messages/_inlinemessage.scss b/theme-base/components/messages/_inlinemessage.scss
new file mode 100644
index 0000000..ac768d4
--- /dev/null
+++ b/theme-base/components/messages/_inlinemessage.scss
@@ -0,0 +1,64 @@
+.p-inline-message {
+    padding: $inlineMessagePadding;
+    margin: $inlineMessageMargin;
+    border-radius: $borderRadius;
+
+    &.p-inline-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    .p-inline-message-icon {
+        font-size: $inlineMessageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-inline-message-text {
+        font-size: $inlineMessageTextFontSize;
+    }
+
+    &.p-inline-message-icon-only {
+        .p-inline-message-icon {
+            margin-right: 0;
+        }
+    }
+}
diff --git a/theme-base/components/messages/_message.scss b/theme-base/components/messages/_message.scss
new file mode 100644
index 0000000..151b7ad
--- /dev/null
+++ b/theme-base/components/messages/_message.scss
@@ -0,0 +1,94 @@
+.p-message {
+    margin: $messageMargin;
+    border-radius: $borderRadius;
+
+    .p-message-wrapper {
+        padding: $messagePadding;
+    }
+
+    .p-message-close {
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        border-radius: $actionIconBorderRadius;
+        background: transparent;
+        transition: $actionIconTransition;
+
+        &:hover {
+            background: rgba(255,255,255,.3);
+        }
+
+        &:focus {
+            @include focused();
+        }
+    }
+
+    &.p-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-message-icon {
+            color: $infoMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-message-icon {
+            color: $successMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-message-icon {
+            color: $warningMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-message-icon {
+            color: $errorMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    .p-message-text {
+        font-size: $messageTextFontSize;
+        font-weight: $messageTextFontWeight;
+    }
+
+    .p-message-icon {
+        font-size: $messageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+}
diff --git a/theme-base/components/messages/_toast.scss b/theme-base/components/messages/_toast.scss
new file mode 100644
index 0000000..af05f9f
--- /dev/null
+++ b/theme-base/components/messages/_toast.scss
@@ -0,0 +1,95 @@
+.p-toast {
+    opacity: $toastOpacity;
+
+    .p-toast-message {
+        margin: $toastMargin;
+        box-shadow: $toastShadow;
+        border-radius: $borderRadius;
+
+        .p-toast-message-content {
+            padding: $toastPadding;
+            border-width: $toastBorderWidth;
+
+            .p-toast-message-text {
+                margin: $toastMessageTextMargin;
+            }
+
+            .p-toast-message-icon {
+                font-size: $toastIconFontSize;
+            }
+
+            .p-toast-summary {
+                font-weight: $toastTitleFontWeight;
+            }
+
+            .p-toast-detail {
+                margin: $toastDetailMargin;
+            }
+        }
+
+        .p-toast-icon-close {
+            width: $toastIconFontSize;
+            height: $toastIconFontSize;
+            border-radius: $actionIconBorderRadius;
+            background: transparent;
+            transition: $actionIconTransition;
+
+            &:hover {
+                background: rgba(255,255,255,.3);
+            }
+
+            &:focus {
+                @include focused();
+            }
+        }
+
+        &.p-toast-message-info {
+            background: $infoMessageBg;
+            border: $infoMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $infoMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $infoMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-success {
+            background: $successMessageBg;
+            border: $successMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $successMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $successMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-warn {
+            background: $warningMessageBg;
+            border: $warningMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $warningMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $warningMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-error {
+            background: $errorMessageBg;
+            border: $errorMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $errorMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $errorMessageIconColor;
+            }
+        }
+
+    }
+}
diff --git a/theme-base/components/misc/_avatar.scss b/theme-base/components/misc/_avatar.scss
new file mode 100644
index 0000000..d169b82
--- /dev/null
+++ b/theme-base/components/misc/_avatar.scss
@@ -0,0 +1,30 @@
+.p-avatar {
+    background-color: $avatarBg;
+    border-radius: $borderRadius;
+
+    &.p-avatar-lg {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.5rem;
+
+        .p-avatar-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    &.p-avatar-xl {
+        width: 4rem;
+        height: 4rem;
+        font-size: 2rem;
+
+        .p-avatar-icon {
+            font-size: 2rem;
+        }
+    }
+}
+
+.p-avatar-group {
+    .p-avatar {
+        border: 2px solid $panelContentBg;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/misc/_badge.scss b/theme-base/components/misc/_badge.scss
new file mode 100644
index 0000000..cb73e69
--- /dev/null
+++ b/theme-base/components/misc/_badge.scss
@@ -0,0 +1,77 @@
+.p-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+
+    &.p-badge-secondary {
+        background-color: $secondaryButtonBg;
+        color: $secondaryButtonTextColor;
+    }
+
+    &.p-badge-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-badge-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-badge-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-badge-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    &.p-badge-lg {
+        font-size: 1.5 * $badgeFontSize;
+        min-width: 1.5 * $badgeMinWidth;
+        height: 1.5 * $badgeHeight;
+        line-height: 1.5 * $badgeHeight;
+    }
+
+    &.p-badge-xl {
+        font-size: 2 * $badgeFontSize;
+        min-width: 2 * $badgeMinWidth;
+        height: 2 * $badgeHeight;
+        line-height: 2 * $badgeHeight;
+    }
+}
+
+.p-tag {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    padding: $tagPadding;
+    border-radius: $borderRadius;
+
+    &.p-tag-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-tag-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-tag-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-tag-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/misc/_blockui.scss b/theme-base/components/misc/_blockui.scss
new file mode 100644
index 0000000..e69de29
diff --git a/theme-base/components/misc/_chip.scss b/theme-base/components/misc/_chip.scss
new file mode 100644
index 0000000..f43da33
--- /dev/null
+++ b/theme-base/components/misc/_chip.scss
@@ -0,0 +1,35 @@
+@use 'sass:math';
+
+.p-chip {
+    background-color: $chipBg;
+    color: $chipTextColor;
+    border-radius: $chipBorderRadius;
+    padding: 0 nth($inputPadding, 2);
+
+    .p-chip-text {
+        line-height: 1.5;
+        margin-top: math.div(nth($inputPadding, 1), 2);
+        margin-bottom: math.div(nth($inputPadding, 1), 2);
+    }
+
+    .p-chip-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    img {
+        width: 1.5 + nth($inputPadding, 1);
+        height: 1.5 + nth($inputPadding, 1);
+        margin-left: -1 * nth($inputPadding, 2);
+        margin-right: $inlineSpacing;
+    }
+
+    .p-chip-remove-icon {
+        border-radius: $borderRadius;
+        transition: $actionIconTransition;
+        margin-left: $inlineSpacing;
+        
+        &:focus {
+            @include focused();
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/misc/_inplace.scss b/theme-base/components/misc/_inplace.scss
new file mode 100644
index 0000000..8f64b69
--- /dev/null
+++ b/theme-base/components/misc/_inplace.scss
@@ -0,0 +1,17 @@
+.p-inplace {
+    .p-inplace-display {
+        padding: $inplacePadding;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+
+        &:not(.p-disabled):hover {
+            background: $inplaceHoverBg;
+            color: $inplaceTextHoverColor;
+        }
+
+        &:focus {
+            @include focused();
+        }
+    }
+}
+
diff --git a/theme-base/components/misc/_progressbar.scss b/theme-base/components/misc/_progressbar.scss
new file mode 100644
index 0000000..7cf0ea6
--- /dev/null
+++ b/theme-base/components/misc/_progressbar.scss
@@ -0,0 +1,17 @@
+.p-progressbar {
+    border: $progressBarBorder;
+    height: $progressBarHeight;
+    background: $progressBarBg;
+    border-radius: $borderRadius;
+
+    .p-progressbar-value {
+        border: 0 none;
+        margin: 0;
+        background: $progressBarValueBg;
+    }
+
+    .p-progressbar-label {
+        color: $progressBarValueTextColor;
+        line-height: $progressBarHeight;
+    }
+}
diff --git a/theme-base/components/misc/_scrolltop.scss b/theme-base/components/misc/_scrolltop.scss
new file mode 100644
index 0000000..be19dde
--- /dev/null
+++ b/theme-base/components/misc/_scrolltop.scss
@@ -0,0 +1,20 @@
+.p-scrolltop {
+    width: $scrollTopWidth;
+    height: $scrollTopHeight;
+    border-radius: $scrollTopBorderRadius;
+    box-shadow: $inputOverlayShadow;
+    transition: $actionIconTransition;
+
+    &.p-link {
+        background: $scrollTopBg;
+
+        &:hover {
+            background: $scrollTopHoverBg;
+        }
+    }
+
+    .p-scrolltop-icon {
+        font-size: $scrollTopFontSize;
+        color: $scrollTopTextColor;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/misc/_skeleton.scss b/theme-base/components/misc/_skeleton.scss
new file mode 100644
index 0000000..24b3d92
--- /dev/null
+++ b/theme-base/components/misc/_skeleton.scss
@@ -0,0 +1,8 @@
+.p-skeleton {
+    background-color: $skeletonBg;
+    border-radius: $borderRadius;
+
+    &:after {
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/misc/_tag.scss b/theme-base/components/misc/_tag.scss
new file mode 100644
index 0000000..d557724
--- /dev/null
+++ b/theme-base/components/misc/_tag.scss
@@ -0,0 +1,35 @@
+@use 'sass:math';
+
+.p-tag {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    padding: $tagPadding;
+    border-radius: $borderRadius;
+
+    &.p-tag-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-tag-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-tag-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-tag-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    .p-tag-icon {
+        margin-right: math.div($inlineSpacing, 2);
+        font-size: $badgeFontSize;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/misc/_terminal.scss b/theme-base/components/misc/_terminal.scss
new file mode 100644
index 0000000..f507df2
--- /dev/null
+++ b/theme-base/components/misc/_terminal.scss
@@ -0,0 +1,11 @@
+.p-terminal {
+	background: $panelContentBg;
+	color: $panelContentTextColor;
+	border: $panelContentBorder;
+	padding: $panelContentPadding;
+
+	.p-terminal-input {
+		font-size: $fontSize;
+		font-family: $fontFamily;
+	}
+}
diff --git a/theme-base/components/multimedia/_galleria.scss b/theme-base/components/multimedia/_galleria.scss
new file mode 100644
index 0000000..0a8bb40
--- /dev/null
+++ b/theme-base/components/multimedia/_galleria.scss
@@ -0,0 +1,143 @@
+.p-galleria {
+    .p-galleria-close {
+        margin: $galleriaCloseIconMargin;
+        background: $galleriaCloseIconBg;
+        color: $galleriaCloseIconColor;
+        width: $galleriaCloseIconWidth;
+        height: $galleriaCloseIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaCloseIconBorderRadius;
+
+        .p-galleria-close-icon {
+            font-size: $galleriaCloseIconFontSize;
+        }
+
+        &:hover {
+            background: $galleriaCloseIconHoverBg;
+            color: $galleriaCloseIconHoverColor;
+        }
+    }
+
+    .p-galleria-item-nav {
+        background: $galleriaItemNavigatorBg;
+        color: $galleriaItemNavigatorColor;
+        width: $galleriaItemNavigatorWidth;
+        height: $galleriaItemNavigatorHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaItemNavigatorBorderRadius;
+        margin: $galleriaItemNavigatorMargin;
+
+        .p-galleria-item-prev-icon,
+        .p-galleria-item-next-icon {
+            font-size: $galleriaItemNavigatorFontSize;
+        }
+
+        &:not(.p-disabled) {
+            &:hover {
+                background: $galleriaItemNavigatorHoverBg;
+                color: $galleriaItemNavigatorHoverColor;
+            }
+        }
+    }
+
+    .p-galleria-caption {
+        background: $galleriaCaptionBg;
+        color: $galleriaCaptionTextColor;
+        padding: $galleriaCaptionPadding;
+    }
+
+    .p-galleria-indicators {
+        padding: $galleriaIndicatorsPadding;
+
+        .p-galleria-indicator {
+            button {
+                background-color: $galleriaIndicatorBg;
+                width: $galleriaIndicatorWidth;
+                height: $galleriaIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $galleriaIndicatorBorderRadius;
+
+                &:hover {
+                    background: $galleriaIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicators-bottom,
+    &.p-galleria-indicators-top {
+        .p-galleria-indicator {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicators-left,
+    &.p-galleria-indicators-right {
+        .p-galleria-indicator {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            background: $galleriaIndicatorsBgOnItem;
+
+            .p-galleria-indicator {
+                button {
+                    background: $galleriaIndicatorBgOnItem;
+
+                    &:hover {
+                        background: $galleriaIndicatorHoverBgOnItem;
+                    }
+                }
+
+                &.p-highlight {
+                    button {
+                        background: $highlightBg;
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-galleria-thumbnail-container {
+        background: $galleriaThumbnailContainerBg;
+        padding: $galleriaThumbnailContainerPadding;
+
+        .p-galleria-thumbnail-prev,
+        .p-galleria-thumbnail-next {
+            margin: $inlineSpacing;
+            background-color: $galleriaThumbnailNavigatorBg;
+            color: $galleriaThumbnailNavigatorColor;
+            width: $galleriaThumbnailNavigatorWidth;
+            height: $galleriaThumbnailNavigatorHeight;
+            transition: $actionIconTransition;
+            border-radius: $galleriaThumbnailNavigatorBorderRadius;
+
+            &:hover {
+                background: $galleriaThumbnailNavigatorHoverBg;
+                color: $galleriaThumbnailNavigatorHoverColor;
+            }
+        }
+
+        .p-galleria-thumbnail-item-content {
+            transition: $listItemTransition;
+            
+            &:focus {
+                @include focused();
+            }
+        }
+    }
+}
+
+.p-galleria-mask {
+    --maskbg: #{$galleriaMaskBg};
+}
diff --git a/theme-base/components/multimedia/_image.scss b/theme-base/components/multimedia/_image.scss
new file mode 100644
index 0000000..f671f45
--- /dev/null
+++ b/theme-base/components/multimedia/_image.scss
@@ -0,0 +1,44 @@
+.p-image-mask {
+    --maskbg: #{$imageMaskBg};
+}
+
+.p-image-preview-indicator {
+    background-color: transparent;
+    color: $imagePreviewIndicatorColor;
+    transition: $actionIconTransition;
+}
+
+.p-image-preview-container {
+    &:hover {
+        > .p-image-preview-indicator {
+            background-color: $imagePreviewIndicatorBg;
+        }
+    }
+}
+
+.p-image-toolbar {
+    padding: $imagePreviewToolbarPadding;
+}
+
+.p-image-action.p-link {
+    color: $imagePreviewActionIconColor;
+    background-color: $imagePreviewActionIconBg;
+    width: $imagePreviewActionIconWidth;
+    height: $imagePreviewActionIconHeight;
+    border-radius: $imagePreviewActionIconBorderRadius;
+    transition: $actionIconTransition;
+    margin-right: $inlineSpacing;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &:hover {
+        color: $imagePreviewActionIconHoverColor;
+        background-color: $imagePreviewActionIconHoverBg;
+    }
+
+    i {
+        font-size: $imagePreviewActionIconFontSize;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/overlay/_confirmpopup.scss b/theme-base/components/overlay/_confirmpopup.scss
new file mode 100644
index 0000000..b5b543f
--- /dev/null
+++ b/theme-base/components/overlay/_confirmpopup.scss
@@ -0,0 +1,67 @@
+.p-confirm-popup {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-confirm-popup-content {
+        padding: $confirmPopupContentPadding;
+    }
+
+    .p-confirm-popup-footer {
+        text-align: right;
+        padding: $confirmPopupFooterPadding;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: $overlayContentBg;
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: nth($overlayContentBorder, 3);
+        }
+    }
+
+    &.p-confirm-popup-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+
+    .p-confirm-popup-icon {
+        font-size: $primeIconFontSize * 1.5;
+    }
+
+    .p-confirm-popup-message {
+        margin-left: $inlineSpacing * 2;
+    }
+}
diff --git a/theme-base/components/overlay/_dialog.scss b/theme-base/components/overlay/_dialog.scss
new file mode 100644
index 0000000..597b4b1
--- /dev/null
+++ b/theme-base/components/overlay/_dialog.scss
@@ -0,0 +1,64 @@
+.p-dialog {
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+    border: $overlayContentBorder;
+
+    .p-dialog-header {
+        border-bottom: $dialogHeaderBorder;
+        background: $dialogHeaderBg;
+        color: $dialogHeaderTextColor;
+        padding: $dialogHeaderPadding;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dialog-title {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-dialog-header-icon {
+            @include action-icon();
+            margin-right: $inlineSpacing;
+            
+            &:last-child {
+                margin-right: 0;
+            }            
+        }
+    }
+
+    .p-dialog-content {
+        background: $overlayContentBg;
+        color: $panelContentTextColor;
+        padding: $dialogContentPadding;
+
+        &:last-of-type {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-dialog-footer {
+        border-top:  $dialogFooterBorder;
+        background: $overlayContentBg;
+        color: $panelFooterTextColor;
+        padding: $dialogFooterPadding;
+        text-align: right;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+        }
+    }
+
+    &.p-confirm-dialog {
+        .p-confirm-dialog-icon {
+            font-size: $primeIconFontSize * 2;
+        }
+
+        .p-confirm-dialog-message {
+            margin-left: $inlineSpacing * 2;
+        }
+    }
+}
diff --git a/theme-base/components/overlay/_overlaypanel.scss b/theme-base/components/overlay/_overlaypanel.scss
new file mode 100644
index 0000000..e635041
--- /dev/null
+++ b/theme-base/components/overlay/_overlaypanel.scss
@@ -0,0 +1,64 @@
+@use 'sass:math';
+
+.p-overlaypanel {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-overlaypanel-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-overlaypanel-close {
+        background: $buttonBg;
+        color: $buttonTextColor;
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $actionIconBorderRadius;
+        position: absolute;
+        top: math.div(-1 * $actionIconWidth, 2);
+        right: math.div(-1 * $actionIconWidth, 2);
+
+        &:enabled:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+        }
+    }
+
+    &.p-overlaypanel-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+}
diff --git a/theme-base/components/overlay/_sidebar.scss b/theme-base/components/overlay/_sidebar.scss
new file mode 100644
index 0000000..b74dd90
--- /dev/null
+++ b/theme-base/components/overlay/_sidebar.scss
@@ -0,0 +1,23 @@
+.p-sidebar {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $overlayContainerShadow;
+
+    .p-sidebar-header {
+        padding: $panelHeaderPadding;
+
+        .p-sidebar-close,
+        .p-sidebar-icon {
+            @include action-icon();
+        }
+
+        & + .p-sidebar-content {
+            padding-top: 0;
+        }
+    }
+
+    .p-sidebar-content {
+        padding: $panelContentPadding;
+    }
+}
diff --git a/theme-base/components/overlay/_tooltip.scss b/theme-base/components/overlay/_tooltip.scss
new file mode 100644
index 0000000..47cce55
--- /dev/null
+++ b/theme-base/components/overlay/_tooltip.scss
@@ -0,0 +1,33 @@
+.p-tooltip {
+    .p-tooltip-text {
+        background: $tooltipBg;
+        color: $tooltipTextColor;
+        padding: $tooltipPadding;
+        box-shadow: $inputOverlayShadow;
+        border-radius: $borderRadius;
+    }
+
+    &.p-tooltip-right {
+        .p-tooltip-arrow {
+            border-right-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-left {
+        .p-tooltip-arrow {
+            border-left-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-top {
+        .p-tooltip-arrow {
+            border-top-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-bottom {
+        .p-tooltip-arrow {
+            border-bottom-color: $tooltipBg;
+        }
+    }
+}
diff --git a/theme-base/components/panel/_accordion.scss b/theme-base/components/panel/_accordion.scss
new file mode 100644
index 0000000..7908915
--- /dev/null
+++ b/theme-base/components/panel/_accordion.scss
@@ -0,0 +1,118 @@
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-accordion-toggle-icon {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &:not(.p-disabled) {
+            .p-accordion-header-link {
+                &:focus {
+                    @include focused();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-accordion-content {
+        padding: $accordionContentPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-accordion-tab {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-accordion-header {
+                .p-accordion-header-link {
+                    border-radius: 0;
+                }
+            }
+
+            .p-accordion-content {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-accordion-header-link {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-accordion-header:not(.p-highlight) {
+                    .p-accordion-header-link {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+
+                    .p-accordion-content {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+            }
+        } 
+    }
+}
diff --git a/theme-base/components/panel/_card.scss b/theme-base/components/panel/_card.scss
new file mode 100644
index 0000000..f333124
--- /dev/null
+++ b/theme-base/components/panel/_card.scss
@@ -0,0 +1,30 @@
+.p-card {
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    box-shadow: $cardShadow;
+    border-radius: $borderRadius;
+
+    .p-card-body {
+        padding: $cardBodyPadding;
+    }
+
+    .p-card-title {
+        font-size: $cardTitleFontSize;
+        font-weight: $cardTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-card-subtitle {
+        font-weight: $cardSubTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+        color: $cardSubTitleColor;
+    }
+
+    .p-card-content {
+        padding: $cardContentPadding;
+    }
+
+    .p-card-footer {
+        padding: $cardFooterPadding;
+    }
+}
diff --git a/theme-base/components/panel/_divider.scss b/theme-base/components/panel/_divider.scss
new file mode 100644
index 0000000..0f1719e
--- /dev/null
+++ b/theme-base/components/panel/_divider.scss
@@ -0,0 +1,31 @@
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/panel/_fieldset.scss b/theme-base/components/panel/_fieldset.scss
new file mode 100644
index 0000000..b97922a
--- /dev/null
+++ b/theme-base/components/panel/_fieldset.scss
@@ -0,0 +1,47 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}
diff --git a/theme-base/components/panel/_panel.scss b/theme-base/components/panel/_panel.scss
new file mode 100644
index 0000000..6742946
--- /dev/null
+++ b/theme-base/components/panel/_panel.scss
@@ -0,0 +1,42 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-top: 0 none;
+    }
+}
diff --git a/theme-base/components/panel/_scrollpanel.scss b/theme-base/components/panel/_scrollpanel.scss
new file mode 100644
index 0000000..66e00d4
--- /dev/null
+++ b/theme-base/components/panel/_scrollpanel.scss
@@ -0,0 +1,6 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/panel/_splitter.scss b/theme-base/components/panel/_splitter.scss
new file mode 100644
index 0000000..62c8040
--- /dev/null
+++ b/theme-base/components/panel/_splitter.scss
@@ -0,0 +1,19 @@
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}
\ No newline at end of file
diff --git a/theme-base/components/panel/_tabview.scss b/theme-base/components/panel/_tabview.scss
new file mode 100644
index 0000000..5a2c39a
--- /dev/null
+++ b/theme-base/components/panel/_tabview.scss
@@ -0,0 +1,70 @@
+.p-tabview {
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabview-close {
+        margin-left: $inlineSpacing;
+    }
+    
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}
diff --git a/theme-base/components/panel/_toolbar.scss b/theme-base/components/panel/_toolbar.scss
new file mode 100644
index 0000000..78d7415
--- /dev/null
+++ b/theme-base/components/panel/_toolbar.scss
@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}
diff --git a/themes/arya/_extensions.scss b/themes/arya/_extensions.scss
new file mode 100644
index 0000000..7ad12f7
--- /dev/null
+++ b/themes/arya/_extensions.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            .p-galleria-indicator {
+                &.p-highlight {
+                    button {
+                        background: $primaryColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/arya/_variables.scss b/themes/arya/_variables.scss
new file mode 100644
index 0000000..89704ca
--- /dev/null
+++ b/themes/arya/_variables.scss
@@ -0,0 +1,879 @@
+$colors: (
+    "blue": #2196F3,
+    "green": #4caf50,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #3F51B5,
+    "teal": #009688,
+    "orange": #F57C00,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #FF4032,
+    "primary": $primaryColor
+) !default;
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade600:#383838 !default;  //input bg, border, divider
+$shade700:#2b2b2b !default;  //unused
+$shade800:#1e1e1e !default;  //elevated surface
+$shade900:#121212 !default;  //ground surface
+
+$hoverBg:rgba(255,255,255,.03) !default;
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:3px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default; //spacing between inline elements
+$disabledOpacity:.4 !default; //opacity of a disabled item
+$maskBg:rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize:2rem !default;
+$errorColor:#ef9a9a !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: $hoverBg !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .5rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:1px solid $shade600 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$inputFilledBg !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#F48FB1 !default;
+$passwordMediumBg:#FFE082 !default;
+$passwordStrongBg:#C5E1A5 !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#78909C !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 1px scale-color($secondaryButtonBg, $lightness: 30%) !default;
+
+$infoButtonBg:#81D4FA !default;
+$infoButtonTextColor:#121212 !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 1px scale-color($infoButtonBg, $lightness: 30%) !default;
+
+$successButtonBg:#C5E1A5 !default;
+$successButtonTextColor:#121212 !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 1px scale-color($successButtonBg, $lightness: 30%) !default;
+
+$warningButtonBg:#FFE082 !default;
+$warningButtonTextColor:#121212 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 1px scale-color($warningButtonBg, $lightness: 30%) !default;
+
+$helpButtonBg:#CE93D8 !default;
+$helpButtonTextColor:#121212 !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
+
+$dangerButtonBg:#F48FB1 !default;
+$dangerButtonTextColor:#121212 !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 1px scale-color($dangerButtonBg, $lightness: 30%) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$shade800 !default;
+$toggleButtonBorder:1px solid $shade600 !default;
+$toggleButtonTextColor:$shade000 !default;
+$toggleButtonIconColor:$shade100 !default;
+$toggleButtonHoverBg:$hoverBg !default;
+$toggleButtonHoverBorderColor:$shade600 !default;
+$toggleButtonTextHoverColor:$shade000 !default;
+$toggleButtonIconHoverColor:$shade100 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#F48FB1 !default;
+$ratingCancelIconHoverColor:#F48FB1 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade600 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade600 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$hoverBg !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor: $shade600 !default;
+$panelHeaderBorder:1px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:1px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,0.01) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade600 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade600 transparent !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$primaryColor !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$shade800 !default;
+$tabviewContentTextColor:$shade000 !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:700 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$shade100 !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:1px !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:2.286em !default;
+$paginatorElementHeight:2.286em !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade100 !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade000 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade600 !default;
+$tableHeaderBorderWidth:0 0 1px 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade600 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$shade800 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$hoverBg !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:rgba(255,255,255,0.01) !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:1px solid $shade600 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade600 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade600 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:1px 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade600 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid $shade600 !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor:$primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0 !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade800 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade600 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:1px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:none !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#B3E5FC !default;
+$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
+$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$successMessageBg:#C8E6C9 !default;
+$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
+$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$warningMessageBg:#FFECB3 !default;
+$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
+$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$errorMessageBg:#FFCDD2 !default;
+$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
+$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder:1px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:0 none !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade800 !default;
+$menuBorder:1px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextActiveColor:$shade000 !default;
+$menuitemIconActiveColor:$shade000 !default;
+$menuitemActiveBg:$hoverBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade800 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid $shade600 !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$menuBg !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:$hoverBg !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:#f8f9fa !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:#f8f9fa !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:#f8f9fa !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:#f8f9fa !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:#f8f9fa !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade600 !default;
+$galleriaIndicatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$highlightBg !default;
+$scrollTopHoverBg:scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.03) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade000 !default;
+$speedDialActionHoverBg: $shade100 !default;
+$speedDialActionTextColor: $shade900 !default;
+$speedDialActionTextHoverColor: $shade900 !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #121212;
+    --surface-50: #2a2a2a;
+    --surface-100: #414141;
+    --surface-200: #595959;
+    --surface-300: #717171;
+    --surface-400: #898989;
+    --surface-500: #a0a0a0;
+    --surface-600: #b8b8b8;
+    --surface-700: #d0d0d0;
+    --surface-800: #e7e7e7;
+    --surface-900: #ffffff;
+    --gray-50:#e7e7e7;
+    --gray-100: #d0d0d0;
+    --gray-200: #b8b8b8;
+    --gray-300: #a0a0a0;
+    --gray-400: #898989;
+    --gray-500: #717171;
+    --gray-600: #595959;
+    --gray-700: #414141;
+    --gray-800: #2a2a2a;
+    --gray-900: #121212;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#121212;
+    --surface-section:#121212;
+    --surface-card:#1e1e1e;
+    --surface-overlay:#1e1e1e;
+    --surface-border:#383838;
+    --surface-hover:rgba(255,255,255,.03);
+    --maskbg: #{$maskBg};
+    --focus-ring: #{$focusShadow};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
\ No newline at end of file
diff --git a/themes/arya/arya-blue/_extensions.scss b/themes/arya/arya-blue/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/arya/arya-blue/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/arya/arya-blue/_fonts.scss b/themes/arya/arya-blue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/arya/arya-blue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/arya/arya-blue/_variables.scss b/themes/arya/arya-blue/_variables.scss
new file mode 100644
index 0000000..7bd36c8
--- /dev/null
+++ b/themes/arya/arya-blue/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #64B5F6 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: rgba(100, 181, 246, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/arya/arya-blue/theme.scss b/themes/arya/arya-blue/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/arya/arya-blue/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/arya/arya-green/_extensions.scss b/themes/arya/arya-green/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/arya/arya-green/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/arya/arya-green/_fonts.scss b/themes/arya/arya-green/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/arya/arya-green/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/arya/arya-green/_variables.scss b/themes/arya/arya-green/_variables.scss
new file mode 100644
index 0000000..e16b429
--- /dev/null
+++ b/themes/arya/arya-green/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #81C784 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: rgba(129, 199, 132, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/arya/arya-green/theme.scss b/themes/arya/arya-green/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/arya/arya-green/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/arya/arya-orange/_extensions.scss b/themes/arya/arya-orange/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/arya/arya-orange/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/arya/arya-orange/_fonts.scss b/themes/arya/arya-orange/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/arya/arya-orange/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/arya/arya-orange/_variables.scss b/themes/arya/arya-orange/_variables.scss
new file mode 100644
index 0000000..7efe535
--- /dev/null
+++ b/themes/arya/arya-orange/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #FFD54F !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: rgba(255, 213, 79, 0.16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/arya/arya-orange/theme.scss b/themes/arya/arya-orange/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/arya/arya-orange/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/arya/arya-purple/_extensions.scss b/themes/arya/arya-purple/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/arya/arya-purple/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/arya/arya-purple/_fonts.scss b/themes/arya/arya-purple/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/arya/arya-purple/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/arya/arya-purple/_variables.scss b/themes/arya/arya-purple/_variables.scss
new file mode 100644
index 0000000..f7c4649
--- /dev/null
+++ b/themes/arya/arya-purple/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #BA68C8 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: rgba(186, 104, 200, 0.16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/arya/arya-purple/theme.scss b/themes/arya/arya-purple/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/arya/arya-purple/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/bootstrap4/_vendor_extensions.scss b/themes/bootstrap4/_vendor_extensions.scss
new file mode 100644
index 0000000..2cd5351
--- /dev/null
+++ b/themes/bootstrap4/_vendor_extensions.scss
@@ -0,0 +1,10 @@
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+.p-breadcrumb {
+    .p-breadcrumb-chevron {
+        font-family: $fontFamily;
+
+        &:before {
+            content: '/';
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss b/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss
new file mode 100644
index 0000000..1da5349
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss
@@ -0,0 +1,881 @@
+$colors: (
+    "blue": #0d6efd,
+    "green": #198754,
+    "yellow": #ffc107,
+    "cyan": #0dcaf0,
+    "pink": #d63384,
+    "indigo": #6610f2,
+    "teal": #20c997,
+    "orange": #fd7e14,
+    "bluegray": #7C8EA7,
+    "purple": #6f42c1,
+    "red": #DC3545,
+    "primary": $primaryColor
+) !default;
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade200:#7789a1 !default;  
+$shade300:#687c97 !default;  
+$shade600:#3f4b5b !default;  //input bg, border, divider
+$shade700:#343e4d !default;  
+$shade800:#2a323d !default;  //elevated surface
+$shade900:#20262e !default;  //ground surface
+
+$hoverBg:rgba(255,255,255,.04) !default;
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:4px !default;
+$transitionDuration:.15s !default;
+$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.65 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#f19ea6 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: transparent !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:1px solid $shade600 !default;
+$inputHoverBorderColor:$shade600 !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$shade600 !default;
+$inputFilledFocusBg:$shade600 !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1.5rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:1px solid $shade600 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:none !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#f19ea6 !default;
+$passwordMediumBg:#ffe082 !default;
+$passwordStrongBg:#9fdaa8 !default;
+
+//button
+$buttonPadding:.5rem .75rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#6c757d !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid #6c757d !default;
+$secondaryButtonHoverBg:#5a6268 !default;
+$secondaryButtonTextHoverColor:#ffffff !default;
+$secondaryButtonHoverBorderColor:#5a6268 !default;
+$secondaryButtonActiveBg:#545b62 !default;
+$secondaryButtonTextActiveColor:#ffffff !default;
+$secondaryButtonActiveBorderColor:#4e555b !default;
+$secondaryButtonFocusShadow:0 0 0 1px rgba(130,138,145,.5) !default;
+
+$infoButtonBg:#7fd8e6 !default;
+$infoButtonTextColor:#151515 !default;
+$infoButtonBorder:1px solid #4cc8db !default;
+$infoButtonHoverBg:#4cc8db !default;
+$infoButtonTextHoverColor:#151515 !default;
+$infoButtonHoverBorderColor:#26bdd3 !default;
+$infoButtonActiveBg:#26bdd3 !default;
+$infoButtonTextActiveColor:#151515 !default;
+$infoButtonActiveBorderColor:#00b2cc !default;
+$infoButtonFocusShadow:0 0 0 1px #b1e8f0 !default;
+
+$successButtonBg:#9fdaa8 !default;
+$successButtonTextColor:#151515 !default;
+$successButtonBorder:1px solid #78cc86 !default;
+$successButtonHoverBg:#78cc86 !default;
+$successButtonTextHoverColor:#151515 !default;
+$successButtonHoverBorderColor:#5ac06c !default;
+$successButtonActiveBg:#5ac06c !default;
+$successButtonTextActiveColor:#151515 !default;
+$successButtonActiveBorderColor:#3cb553 !default;
+$successButtonFocusShadow:0 0 0 1px #c5e8ca !default;
+
+$warningButtonBg:#ffe082 !default;
+$warningButtonTextColor:#151515 !default;
+$warningButtonBorder:1px solid #ffd54f !default;
+$warningButtonHoverBg:#ffd54f !default;
+$warningButtonTextHoverColor:#151515 !default;
+$warningButtonHoverBorderColor:#ffca28 !default;
+$warningButtonActiveBg:#ffca28 !default;
+$warningButtonTextActiveColor:#151515 !default;
+$warningButtonActiveBorderColor:#ffc107 !default;
+$warningButtonFocusShadow:0 0 0 1px #ffecb3 !default;
+
+$helpButtonBg:#b7a2e0 !default;
+$helpButtonTextColor:#151515 !default;
+$helpButtonBorder:1px solid #9a7cd4 !default;
+$helpButtonHoverBg:#9a7cd4 !default;
+$helpButtonTextHoverColor:#151515 !default;
+$helpButtonHoverBorderColor:#845fca !default;
+$helpButtonActiveBg:#845fca !default;
+$helpButtonTextActiveColor:#151515 !default;
+$helpButtonActiveBorderColor:#6d43c0 !default;
+$helpButtonFocusShadow:0 0 0 1px #d3c7ec !default;
+
+$dangerButtonBg:#f19ea6 !default;
+$dangerButtonTextColor:#151515 !default;
+$dangerButtonBorder:1px solid #e97984 !default;
+$dangerButtonHoverBg:#e97984 !default;
+$dangerButtonTextHoverColor:#151515 !default;
+$dangerButtonHoverBorderColor:#f75965 !default;
+$dangerButtonActiveBg:#f75965 !default;
+$dangerButtonTextActiveColor:#151515 !default;
+$dangerButtonActiveBorderColor:#fd464e !default;
+$dangerButtonFocusShadow:0 0 0 1px #ffd0d9 !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryDarkColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:1px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:1px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:#6c757d !default;
+$toggleButtonBorder:1px solid #6c757d !default;
+$toggleButtonTextColor:#ffffff !default;
+$toggleButtonIconColor:#ffffff !default;
+$toggleButtonHoverBg:#5a6268 !default;
+$toggleButtonHoverBorderColor:#545b62 !default;
+$toggleButtonTextHoverColor:#ffffff !default;
+$toggleButtonIconHoverColor:#ffffff !default;
+$toggleButtonActiveBg:#545b62 !default;
+$toggleButtonActiveBorderColor:#4e555b !default;
+$toggleButtonTextActiveColor:#ffffff !default;
+$toggleButtonIconActiveColor:#ffffff !default;
+$toggleButtonActiveHoverBg:#545b62 !default;
+$toggleButtonActiveHoverBorderColor:#4e555b !default;
+$toggleButtonTextActiveHoverColor:#ffffff !default;
+$toggleButtonIconActiveHoverColor:#ffffff !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#f19ea6 !default;
+$ratingCancelIconHoverColor:#f19ea6 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$primaryColor !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:$borderRadius !default;
+$sliderHandleHoverBorderColor:$primaryDarkColor !default;
+$sliderHandleHoverBg:$primaryDarkColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:0 !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:$borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:$borderRadius !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:$borderRadius !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade600 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$shade600 !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryColor !default;
+$inputSwitchHandleOnBg:$primaryTextColor !default;
+
+//panel
+$panelHeaderBorderColor: $shade600 !default;
+$panelHeaderBorder:1px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem 1.25rem !default;
+$panelToggleableHeaderPadding:.5rem 1.25rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:1px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,.02) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:.5rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 1px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid !default;
+$tabviewHeaderBorderWidth:1px !default;
+$tabviewHeaderBorderColor:$shade800 $shade800 $shade600 $shade800 !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:.75rem 1rem !default;
+$tabviewHeaderMargin:0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$shade600 !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$shade600 $shade600 $shade800 $shade600 !default;
+$tabviewHeaderTextActiveColor:$shade100 !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1.5rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$primaryColor !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.75rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:1px solid $shade600 !default;
+$paginatorElementIconColor:$primaryColor !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:$shade600 !default;
+$paginatorElementIconHoverColor:$primaryColor !default;
+$paginatorElementBorderRadius:0 !default;
+$paginatorElementMargin:0 0 0 -1px !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:solid $shade600 !default;
+$tableHeaderBorderWidth:1px 0 0 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade600 !default;
+$tableHeaderCellBorderWidth:1px 0 2px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$shade800 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$hoverBg !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:#2f3641 !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:1px solid $shade600 !default;
+$tableBodyCellBorderWidth:1px 0 0 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade600 !default;
+$tableFooterCellBorderWidth:1px 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade600 !default;
+$tableFooterBorderWidth:1px 0 1px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 !default;
+$tableBottomPaginatorBorderWidth:1px 0 0 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:1px solid $shade600 !default;
+$dataViewListItemBorderWidth:1px 0 0 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:1px solid $shade600 !default;
+$dataScrollerListItemBorderWidth:1px 0 0 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor:$primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0.286rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$primaryColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade600 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.25rem !default;
+$messageBorderWidth:1px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 !default;
+$toastShadow:0 0.25rem 0.75rem rgba(0,0,0,.1) !default;
+$toastOpacity:1 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#cce5ff !default;
+$infoMessageBorder:solid #b8daff !default;
+$infoMessageTextColor:#004085 !default;
+$infoMessageIconColor:#004085 !default;
+$successMessageBg:#d4edda !default;
+$successMessageBorder:solid #c3e6cb !default;
+$successMessageTextColor:#155724 !default;
+$successMessageIconColor:#155724 !default;
+$warningMessageBg:#fff3cd !default;
+$warningMessageBorder:solid #ffeeba !default;
+$warningMessageTextColor:#856404 !default;
+$warningMessageIconColor:#856404 !default;
+$errorMessageBg:#f8d7da !default;
+$errorMessageBorder:solid #f5c6cb !default;
+$errorMessageTextColor:#721c24 !default;
+$errorMessageIconColor:#721c24 !default;
+
+//overlays
+$overlayContentBorder:1px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:none !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:1px solid $shade600 !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1rem !default;
+$dialogContentPadding:1rem !default;
+$dialogFooterBorder:1px solid $shade600 !default;
+$dialogFooterPadding:1rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:1px solid $shade600 !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:$borderRadius !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade800 !default;
+$menuBorder:1px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextActiveColor:$shade000 !default;
+$menuitemIconActiveColor:$shade000 !default;
+$menuitemActiveBg:$shade900 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade800 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid $shade600 !default;
+$overlayMenuShadow:none !default;
+$verticalMenuPadding:.5rem 0 !default;
+$menuSeparatorMargin:.5rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$shade700 !default;
+$breadcrumbBorder:0 none !default;
+$breadcrumbItemTextColor:$primaryColor !default;
+$breadcrumbItemIconColor:$primaryColor !default;
+$breadcrumbLastItemTextColor:$shade000 !default;
+$breadcrumbLastItemIconColor:$shade000 !default;
+$breadcrumbSeparatorColor:$shade000 !default;
+
+$horizontalMenuPadding:.5rem 1rem !default;
+$horizontalMenuBg:$shade700 !default;
+$horizontalMenuBorder:0 none !default;
+$horizontalMenuTextColor:$shade100 !default;
+$horizontalMenuRootMenuitemPadding:1rem !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$shade100 !default;
+$horizontalMenuRootMenuitemIconColor:$shade100 !default;
+$horizontalMenuRootMenuitemTextHoverColor:$shade000 !default;
+$horizontalMenuRootMenuitemIconHoverColor:$shade000 !default;
+$horizontalMenuRootMenuitemHoverBg:transparent !default;
+$horizontalMenuRootMenuitemTextActiveColor:$shade000 !default;
+$horizontalMenuRootMenuitemIconActiveColor:$shade000 !default;
+$horizontalMenuRootMenuitemActiveBg:transparent !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:$hoverBg !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade000 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:$borderRadius !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:$borderRadius !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:$borderRadius !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$primaryColor !default;
+$scrollTopHoverBg:$primaryDarkColor !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:$borderRadius !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.04) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade600 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #20262e;
+    --surface-50: #363c43;
+    --surface-100: #4d5158;
+    --surface-200: #63676d;
+    --surface-300: #797d82;
+    --surface-400: #909397;
+    --surface-500: #a6a8ab;
+    --surface-600: #bcbec0;
+    --surface-700: #d2d4d5;
+    --surface-800: #e9e9ea;
+    --surface-900: #ffffff;
+    --gray-50:#e9e9ea;
+    --gray-100: #d2d4d5;
+    --gray-200: #bcbec0;
+    --gray-300: #a6a8ab;
+    --gray-400: #909397;
+    --gray-500: #797d82;
+    --gray-600: #63676d;
+    --gray-700: #4d5158;
+    --gray-800: #363c43;
+    --gray-900: #20262e;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#20262e;
+    --surface-section:#20262e;
+    --surface-card:#2a323d;
+    --surface-overlay:#2a323d;
+    --surface-border:#3f4b5b;
+    --surface-hover:rgba(255,255,255,.04);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
diff --git a/themes/bootstrap4/bootstrap4-dark/blue/_extensions.scss b/themes/bootstrap4/bootstrap4-dark/blue/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/blue/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/blue/_fonts.scss b/themes/bootstrap4/bootstrap4-dark/blue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/blue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/blue/_variables.scss b/themes/bootstrap4/bootstrap4-dark/blue/_variables.scss
new file mode 100644
index 0000000..0f9df37
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/blue/_variables.scss
@@ -0,0 +1,10 @@
+$primaryLightColor: #e3f3fe !default;
+$primaryColor: #8dd0ff !default;
+$primaryDarkColor: #56bdff !default;
+$primaryDarkerColor: #1dadff !default;
+$primaryTextColor: #151515 !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables_dark';
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/blue/theme.scss b/themes/bootstrap4/bootstrap4-dark/blue/theme.scss
new file mode 100644
index 0000000..b08f114
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/blue/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../designer/_components';
+@import '../../_vendor_extensions';
+@import './_extensions';
diff --git a/themes/bootstrap4/bootstrap4-dark/purple/_extensions.scss b/themes/bootstrap4/bootstrap4-dark/purple/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/purple/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/purple/_fonts.scss b/themes/bootstrap4/bootstrap4-dark/purple/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/purple/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/purple/_variables.scss b/themes/bootstrap4/bootstrap4-dark/purple/_variables.scss
new file mode 100644
index 0000000..ad12ac7
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/purple/_variables.scss
@@ -0,0 +1,10 @@
+$primaryLightColor: #f0e6f5 !default;
+$primaryColor: #c298d8 !default;
+$primaryDarkColor: #aa70c7 !default;
+$primaryDarkerColor: #9954bb !default;
+$primaryTextColor: #151515 !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables_dark';
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-dark/purple/theme.scss b/themes/bootstrap4/bootstrap4-dark/purple/theme.scss
new file mode 100644
index 0000000..b08f114
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-dark/purple/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../designer/_components';
+@import '../../_vendor_extensions';
+@import './_extensions';
diff --git a/themes/bootstrap4/bootstrap4-light/_variables_light.scss b/themes/bootstrap4/bootstrap4-light/_variables_light.scss
new file mode 100644
index 0000000..ce19e4b
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/_variables_light.scss
@@ -0,0 +1,882 @@
+$colors: (
+    "blue": #0d6efd,
+    "green": #198754,
+    "yellow": #ffc107,
+    "cyan": #0dcaf0,
+    "pink": #d63384,
+    "indigo": #6610f2,
+    "teal": #20c997,
+    "orange": #fd7e14,
+    "bluegray": #7C8EA7,
+    "purple": #6f42c1,
+    "red": #DC3545,
+    "primary": $primaryColor
+) !default;
+
+//reused color variables
+$shade000:#ffffff !default;              //surface
+$shade100:#efefef !default;              //header background
+$shade200:#e9ecef !default;              //hover background
+$shade300:#dee2e6 !default;              //border, divider
+$shade400:#ced4da !default;              //input border
+$shade500:#adb5bd !default;              //unused
+$shade600:#6c757d !default;              //text secondary color
+$shade700:#495057 !default;              //input text color
+$shade800:#343a40 !default;              //unused
+$shade900:#212529 !default;              //text color
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade900 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:4px !default;
+$transitionDuration:.15s !default;
+$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.65 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#dc3545 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:transparent !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade700 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$shade400 !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade100 !default;
+$inputFilledHoverBg:$shade100 !default;
+$inputFilledFocusBg:$shade100 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade700 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade900 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1.5rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade900 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade900 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade900 !default;
+$inputListHeaderBorder:1px solid $shade300 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid rgba(0,0,0,.15) !default;
+$inputOverlayShadow:none !default;
+
+//password
+$passwordMeterBg:$shade200 !default;
+$passwordWeakBg:#dc3545 !default;
+$passwordMediumBg:#ffc107 !default;
+$passwordStrongBg:#28a745 !default;
+
+//button
+$buttonPadding:.5rem .75rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#6c757d !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid #6c757d !default;
+$secondaryButtonHoverBg:#5a6268 !default;
+$secondaryButtonTextHoverColor:#ffffff !default;
+$secondaryButtonHoverBorderColor:#5a6268 !default;
+$secondaryButtonActiveBg:#545b62 !default;
+$secondaryButtonTextActiveColor:#ffffff !default;
+$secondaryButtonActiveBorderColor:#4e555b !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem rgba(130,138,145,.5) !default;
+
+$infoButtonBg:#17a2b8 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid #17a2b8 !default;
+$infoButtonHoverBg:#138496 !default;
+$infoButtonTextHoverColor:#ffffff !default;
+$infoButtonHoverBorderColor:#117a8b !default;
+$infoButtonActiveBg:#138496 !default;
+$infoButtonTextActiveColor:#ffffff !default;
+$infoButtonActiveBorderColor:#117a8b !default;
+$infoButtonFocusShadow:0 0 0 0.2rem rgba(58,176,195,.5) !default;
+
+$successButtonBg:#28a745 !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid #28a745 !default;
+$successButtonHoverBg:#218838 !default;
+$successButtonTextHoverColor:#ffffff !default;
+$successButtonHoverBorderColor:#1e7e34 !default;
+$successButtonActiveBg:#1e7e34 !default;
+$successButtonTextActiveColor:#ffffff !default;
+$successButtonActiveBorderColor:#1c7430 !default;
+$successButtonFocusShadow:0 0 0 0.2rem rgba(72,180,97,.5) !default;
+
+$warningButtonBg:#ffc107 !default;
+$warningButtonTextColor:#212529 !default;
+$warningButtonBorder:1px solid #ffc107 !default;
+$warningButtonHoverBg:#e0a800 !default;
+$warningButtonTextHoverColor:#212529 !default;
+$warningButtonHoverBorderColor:#d39e00 !default;
+$warningButtonActiveBg:#d39e00 !default;
+$warningButtonTextActiveColor:#212529 !default;
+$warningButtonActiveBorderColor:#c69500 !default;
+$warningButtonFocusShadow:0 0 0 0.2rem rgba(222,170,12,.5) !default;
+
+$helpButtonBg:#6f42c1 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid #6f42c1 !default;
+$helpButtonHoverBg:#633bad !default;
+$helpButtonTextHoverColor:#ffffff !default;
+$helpButtonHoverBorderColor:#58349a !default;
+$helpButtonActiveBg:#58349a !default;
+$helpButtonTextActiveColor:#ffffff !default;
+$helpButtonActiveBorderColor:#4d2e87 !default;
+$helpButtonFocusShadow:0 0 0 0.2rem #d3c6ec !default;
+
+$dangerButtonBg:#dc3545 !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid #dc3545 !default;
+$dangerButtonHoverBg:#c82333 !default;
+$dangerButtonTextHoverColor:#ffffff !default;
+$dangerButtonHoverBorderColor:#bd2130 !default;
+$dangerButtonActiveBg:#bd2130 !default;
+$dangerButtonTextActiveColor:#ffffff !default;
+$dangerButtonActiveBorderColor:#b21f2d !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem rgba(225,83,97,.5) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryDarkColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#212529 !default;
+$colorPickerBorder:1px solid #212529 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:#6c757d !default;
+$toggleButtonBorder:1px solid #6c757d !default;
+$toggleButtonTextColor:#ffffff !default;
+$toggleButtonIconColor:#ffffff !default;
+$toggleButtonHoverBg:#5a6268 !default;
+$toggleButtonHoverBorderColor:#545b62 !default;
+$toggleButtonTextHoverColor:#ffffff !default;
+$toggleButtonIconHoverColor:#ffffff !default;
+$toggleButtonActiveBg:#545b62 !default;
+$toggleButtonActiveBorderColor:#4e555b !default;
+$toggleButtonTextActiveColor:#ffffff !default;
+$toggleButtonIconActiveColor:#ffffff !default;
+$toggleButtonActiveHoverBg:#545b62 !default;
+$toggleButtonActiveHoverBorderColor:#4e555b !default;
+$toggleButtonTextActiveHoverColor:#ffffff !default;
+$toggleButtonIconActiveHoverColor:#ffffff !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade900 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#dc3545 !default;
+$ratingCancelIconHoverColor:#dc3545 !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade200 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$primaryColor !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:$borderRadius !default;
+$sliderHandleHoverBorderColor:$primaryDarkColor !default;
+$sliderHandleHoverBg:$primaryDarkColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:0 !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade900 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade100 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade900 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:$borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade900 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:$borderRadius !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:$borderRadius !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:$shade400 !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor: $shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade900 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem 1.25rem !default;
+$panelToggleableHeaderPadding:.5rem 1.25rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade900 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg:rgba(0,0,0,.05) !default;
+$panelContentTextColor:$shade900 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade900 !default;
+$panelFooterPadding:.5rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade900 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade900 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade900 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid #dee2e6 !default;
+$tabviewNavBorderWidth:0 0 1px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid !default;
+$tabviewHeaderBorderWidth:1px !default;
+$tabviewHeaderBorderColor:$shade000 $shade000 #dee2e6 $shade000 !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:.75rem 1rem !default;
+$tabviewHeaderMargin:0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:#dee2e6 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:#dee2e6 #dee2e6 $shade000 #dee2e6 !default;
+$tabviewHeaderTextActiveColor:$shade700 !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1.5rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$primaryColor !default;
+$paginatorBorder:solid $shade300 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.75rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:$shade000 !default;
+$paginatorElementBorder:1px solid #dee2e6 !default;
+$paginatorElementIconColor:$primaryColor !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:#dee2e6 !default;
+$paginatorElementIconHoverColor:$primaryColor !default;
+$paginatorElementBorderRadius:0 !default;
+$paginatorElementMargin:0 0 0 -1px !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:solid #dee2e6 !default;
+$tableHeaderBorderWidth:1px 0 0 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade900 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade000 !default;
+$tableHeaderCellTextColor:$shade900 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid #dee2e6 !default;
+$tableHeaderCellBorderWidth:1px 0 2px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade900 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade000 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade900 !default;
+$tableBodyRowEvenBg:rgba(0,0,0,.05) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade900 !default;
+$tableBodyCellBorder:1px solid #dee2e6 !default;
+$tableBodyCellBorderWidth:1px 0 0 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade000 !default;
+$tableFooterCellTextColor:$shade900 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid #dee2e6 !default;
+$tableFooterCellBorderWidth:1px 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid #dee2e6 !default;
+$tableFooterBorderWidth:1px 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade900 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:1px 0 0 0 !default;
+$tableBottomPaginatorBorderWidth:1px 0 0 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:1px solid $shade300 !default;
+$dataViewListItemBorderWidth:1px 0 0 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:1px solid $shade300 !default;
+$dataScrollerListItemBorderWidth:1px 0 0 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor:$primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0.286rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$primaryColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.25rem !default;
+$messageBorderWidth:1px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 !default;
+$toastShadow:0 0.25rem 0.75rem rgba(0,0,0,.1) !default;
+$toastOpacity:1 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#cce5ff !default;
+$infoMessageBorder:solid #b8daff !default;
+$infoMessageTextColor:#004085 !default;
+$infoMessageIconColor:#004085 !default;
+$successMessageBg:#d4edda !default;
+$successMessageBorder:solid #c3e6cb !default;
+$successMessageTextColor:#155724 !default;
+$successMessageIconColor:#155724 !default;
+$warningMessageBg:#fff3cd !default;
+$warningMessageBorder:solid #ffeeba !default;
+$warningMessageTextColor:#856404 !default;
+$warningMessageIconColor:#856404 !default;
+$errorMessageBg:#f8d7da !default;
+$errorMessageBorder:solid #f5c6cb !default;
+$errorMessageTextColor:#721c24 !default;
+$errorMessageIconColor:#721c24 !default;
+
+//overlays
+$overlayContentBorder:1px solid rgba(0,0,0,.2) !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:none !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:1px solid $shade200 !default;
+$dialogHeaderTextColor:$shade900 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1rem !default;
+$dialogContentPadding:1rem !default;
+$dialogFooterBorder:1px solid $shade200 !default;
+$dialogFooterPadding:1rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade900 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:1px solid $shade300 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade900 !default;
+$stepsItemNumberBorderRadius:$borderRadius !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade200 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade900 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade900 !default;
+$menuitemIconColor:$shade900 !default;
+$menuitemTextHoverColor:$shade900 !default;
+$menuitemIconHoverColor:$shade900 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$shade900 !default;
+$menuitemIconActiveColor:$shade900 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade900 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid rgba(0,0,0,.15) !default;
+$overlayMenuShadow:none !default;
+$verticalMenuPadding:.5rem 0 !default;
+$menuSeparatorMargin:.5rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$shade100 !default;
+$breadcrumbBorder:0 none !default;
+$breadcrumbItemTextColor:$primaryColor !default;
+$breadcrumbItemIconColor:$primaryColor !default;
+$breadcrumbLastItemTextColor:$shade600 !default;
+$breadcrumbLastItemIconColor:$shade600 !default;
+$breadcrumbSeparatorColor:$shade600 !default;
+
+$horizontalMenuPadding:.5rem 1rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:0 none !default;
+$horizontalMenuTextColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemPadding:1rem !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:rgba(0,0,0,.5) !default;
+$horizontalMenuRootMenuitemIconColor:rgba(0,0,0,.5) !default;
+$horizontalMenuRootMenuitemTextHoverColor:rgba(0,0,0,.7) !default;
+$horizontalMenuRootMenuitemIconHoverColor:rgba(0,0,0,.7) !default;
+$horizontalMenuRootMenuitemHoverBg:transparent !default;
+$horizontalMenuRootMenuitemTextActiveColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemIconActiveColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemActiveBg:transparent !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:$borderRadius !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:$borderRadius !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:$borderRadius !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:$borderRadius !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade200 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade800 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade900};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #f9fafb;
+    --surface-100: #f8f9fa;
+    --surface-200: #e9ecef;
+    --surface-300: #dee2e6;
+    --surface-400: #ced4da;
+    --surface-500: #adb5bd;
+    --surface-600: #6c757d;
+    --surface-700: #495057;
+    --surface-800: #343a40;
+    --surface-900: #212529;
+    --gray-50: #f9fafb;
+    --gray-100: #f8f9fa;
+    --gray-200: #e9ecef;
+    --gray-300: #dee2e6;
+    --gray-400: #ced4da;
+    --gray-500: #adb5bd;
+    --gray-600: #6c757d;
+    --gray-700: #495057;
+    --gray-800: #343a40;
+    --gray-900: #212529;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#efefef;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dee2e6;
+    --surface-hover:#e9ecef;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
+
diff --git a/themes/bootstrap4/bootstrap4-light/blue/_extensions.scss b/themes/bootstrap4/bootstrap4-light/blue/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/blue/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-light/blue/_fonts.scss b/themes/bootstrap4/bootstrap4-light/blue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/blue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-light/blue/_variables.scss b/themes/bootstrap4/bootstrap4-light/blue/_variables.scss
new file mode 100644
index 0000000..362b301
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/blue/_variables.scss
@@ -0,0 +1,10 @@
+$primaryLightColor: rgba(38,143,255,.5) !default;
+$primaryColor: #007bff !default;
+$primaryDarkColor: #0069d9 !default;
+$primaryDarkerColor: #0062cc !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables_light';
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-light/blue/theme.scss b/themes/bootstrap4/bootstrap4-light/blue/theme.scss
new file mode 100644
index 0000000..b08f114
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/blue/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../designer/_components';
+@import '../../_vendor_extensions';
+@import './_extensions';
diff --git a/themes/bootstrap4/bootstrap4-light/purple/_extensions.scss b/themes/bootstrap4/bootstrap4-light/purple/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/purple/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-light/purple/_fonts.scss b/themes/bootstrap4/bootstrap4-light/purple/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/purple/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-light/purple/_variables.scss b/themes/bootstrap4/bootstrap4-light/purple/_variables.scss
new file mode 100644
index 0000000..6ffb9bc
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/purple/_variables.scss
@@ -0,0 +1,10 @@
+$primaryLightColor: rgba(136, 60, 174, 0.5) !default;
+$primaryColor: #883cae !default;
+$primaryDarkColor: #7a38a7 !default;
+$primaryDarkerColor: #68329e !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables_light';
\ No newline at end of file
diff --git a/themes/bootstrap4/bootstrap4-light/purple/theme.scss b/themes/bootstrap4/bootstrap4-light/purple/theme.scss
new file mode 100644
index 0000000..b08f114
--- /dev/null
+++ b/themes/bootstrap4/bootstrap4-light/purple/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../designer/_components';
+@import '../../_vendor_extensions';
+@import './_extensions';
diff --git a/themes/fluent/fluent-light/_extensions.scss b/themes/fluent/fluent-light/_extensions.scss
new file mode 100644
index 0000000..4f9fa1f
--- /dev/null
+++ b/themes/fluent/fluent-light/_extensions.scss
@@ -0,0 +1,272 @@
+/* Customizations to the designer theme should be defined here */
+.p-button-label {
+    font-weight: 600;
+}
+
+.p-slider:not(.p-disabled):hover {
+    background-color: $themeLighter;
+
+    .p-slider-range {
+        background-color: $themePrimary;
+    }
+
+    .p-slider-handle {
+        border-color: $themeDark;
+    }
+}
+
+.p-inputswitch {
+    width: 40px;
+    height: 20px;
+
+    .p-inputswitch-slider {
+        border: $inputBorder;
+
+        &:before {
+            width: 12px;
+            height: 12px;
+            margin-top: -6px;
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider {
+            border-color: $inputHoverBorderColor;
+
+            &:before {
+                background-color: $inputHoverBorderColor;
+            }
+        }
+    }
+
+    &.p-inputswitch-checked {
+        &:not(.p-disabled):hover {
+            .p-inputswitch-slider {
+                border-color: $inputSwitchSliderOnBg;
+                
+                &:before {
+                    background-color: $inputSwitchHandleOnBg;
+                }
+            }
+        }
+
+        .p-inputswitch-slider {
+            border-color: $inputSwitchSliderOnBg;
+        }
+    }
+}
+
+.p-datepicker {
+    .p-datepicker-header .p-datepicker-title {
+        order: 1;
+        margin: 0 auto 0 0;
+    }
+
+    .p-datepicker-prev {
+        order: 2;
+
+        .p-datepicker-prev-icon:before {
+            content: "\e919";
+        }
+    }
+
+    .p-datepicker-next {
+        order: 3;
+        font-size: 90%;
+
+        .p-datepicker-next-icon:before {
+            content: "\e91c";
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        border-top: 0 none;
+    }
+
+    .p-timepicker {
+        border-top: 0 none;
+
+        span {
+            font-size: 90%;
+        }
+
+        .pi-chevron-up:before {
+            content: "\e91c";
+        }
+
+        .pi-chevron-down:before {
+            content: "\e919";
+        }
+    }
+
+    table {
+        font-size: 90%;
+
+        td {
+            &.p-datepicker-today {
+                > span {
+                    border-radius: 50%;
+                }
+            }
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        .p-button {
+            font-size: 90%;
+            color: $textColor;
+            
+            .p-button-label {
+                font-weight: 400;
+            }
+
+            &:enabled:hover {
+                color: $textColor;
+                background-color:$neutralLighter;
+            }
+        }
+    }
+
+    .p-monthpicker {
+        .p-monthpicker-month {
+            padding: .5rem 0;
+        }
+    }
+}
+
+.p-datatable {
+    font-size: 90%;
+}
+
+.p-toast {
+    font-size: 90%;
+
+    .p-toast-icon-close-icon {
+        font-size: 90%;
+    }
+}
+
+.p-message {
+    font-size: 90%;
+
+    .p-message-close {
+        .p-message-close-icon {
+            font-size: 90%;
+        }
+    }
+}
+
+.p-tooltip {
+    .p-tooltip-text {
+        font-size: 90%;
+    }
+}
+
+.p-component {
+    .p-menu-separator {
+        border-color: #eeeeee;
+    }
+}
+
+.p-submenu-icon {
+    color: $textSecondaryColor !important;
+}
+
+.p-menuitem-active .p-submenu-icon {
+    color: $textColor !important;
+}
+
+.p-progressbar-label {
+    display: none !important;
+}
+
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $themePrimary;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $themePrimary;
+    }
+}
+
+@mixin disabled-input() {
+    background-color: $neutralLighter;
+    border-color: $neutralLighter;
+    color: $neutralTertiary;
+    opacity: 1;
+    user-select: none;
+}
+
+@mixin focused-input-field() {
+    box-shadow: inset 0 0 0 1px $themePrimary;
+}
+
+@mixin focused-with-outline() {
+    box-shadow: none;
+    outline: 1px solid $focusOutlineColor;
+    outline-offset: 2px;
+}
+
+.p-inputtext {
+    &:disabled {
+        @include disabled-input();
+    }
+
+    &:enabled:focus {
+        @include focused-input-field();
+    }   
+}
+
+.p-checkbox .p-checkbox-box,
+.p-radiobutton .p-radiobutton-box,
+.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container,
+.p-chips .p-chips-multiple-container {
+    &.p-disabled {
+        @include disabled-input();
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input-field();
+    }
+}
+
+.p-dropdown,
+.p-multiselect {
+    &.p-disabled {
+        @include disabled-input();
+
+        .p-dropdown-label,
+        .p-dropdown-trigger-icon {
+            color: $neutralTertiary;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input-field();
+    }
+}
+
+.p-inputswitch.p-focus {
+    .p-inputswitch-slider {
+        box-shadow: none;
+        outline: 1px solid $focusOutlineColor;
+        outline-offset: 2px;
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $themePrimary;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $themePrimary;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/fluent/fluent-light/_fonts.scss b/themes/fluent/fluent-light/_fonts.scss
new file mode 100644
index 0000000..e69de29
diff --git a/themes/fluent/fluent-light/_variables.scss b/themes/fluent/fluent-light/_variables.scss
new file mode 100644
index 0000000..a374822
--- /dev/null
+++ b/themes/fluent/fluent-light/_variables.scss
@@ -0,0 +1,893 @@
+//theme
+$themeDarker:#004578 !default;
+$themeDark:#005a9e !default;
+$themeDarkAlt:#106ebe !default;
+$themePrimary:#0078d4 !default;
+$themeSecondary:#2b88d8 !default;
+$themeTertiary:#71afe5 !default;
+$themeLight:#c7e0f4 !default;
+$themeLighter:#deecf9 !default;
+$themeLighterAlt:#eff6fc !default;
+
+$colors: (
+    "blue": #106EBE,
+    "green": #60A90A,
+    "yellow": #FFB900,
+    "cyan": #00B7C3,
+    "pink": #E3008C,
+    "indigo": #2E48C6,
+    "teal": #008272,
+    "orange": #D45C00,
+    "bluegray": #758FB6,
+    "purple": #8378DE,
+    "red": #D13438,
+    "primary": $themePrimary
+) !default;
+
+//foreground
+$black:#000000 !default;
+$white: #ffffff !default;
+$neutralDark:#201f1e !default;
+$neutralPrimary:#323130 !default;
+$neutralPrimaryAlt:#3b3a39 !default;
+$neutralSecondary:#605e5c !default;
+$neutralTertiary:#a19f9d !default;
+$neutralTertiaryAlt:#c8c6c4 !default;
+$neutralQuaternaryAlt:#e1dfdd !default;
+$neutralLight:#edebe9 !default;
+$neutralLighter:#f3f2f1 !default;
+$neutralLighterAlt:#faf9f8 !default;
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$neutralPrimary !default;
+$textSecondaryColor:$neutralSecondary !default;
+$borderRadius:2px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $neutralLight !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#a4252c !default;
+
+//highlight
+$highlightBg: $neutralLight !default;
+$highlightTextColor: $neutralPrimary !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$neutralSecondary !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:inset 0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$neutralSecondary !default;
+$actionIconHoverBg:$neutralLighter !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$neutralSecondary !default;
+$actionIconBorderRadius:2px !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .5rem !default;
+$inputTextFontSize:1rem !default;
+
+$inputBg:$white !default;
+$inputTextColor:$neutralPrimary !default;
+$inputIconColor:$neutralSecondary !default;
+$inputBorder:1px solid $neutralSecondary !default;
+$inputHoverBorderColor:$neutralPrimary !default;
+$inputFocusBorderColor:$themePrimary !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$neutralSecondary !default;
+$inputFilledBg:$neutralLighterAlt !default;
+$inputFilledHoverBg:$neutralLighterAlt !default;
+$inputFilledFocusBg:$neutralLighterAlt !default;
+
+//input groups
+$inputGroupBg:$neutralLighter !default;
+$inputGroupTextColor:$neutralSecondary !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$white !default;
+$inputListTextColor:$neutralPrimary !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:0 !default;
+$inputListItemPadding:.75rem .5rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$neutralPrimary !default;
+$inputListItemHoverBg:$neutralLighter !default;
+$inputListItemTextHoverColor:$neutralPrimary !default;
+$inputListItemBorder:1px solid transparent !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem .5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$white !default;
+$inputListHeaderTextColor:$neutralPrimary !default;
+$inputListHeaderBorder:1px solid $neutralLight !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px !default;
+
+//password
+$passwordMeterBg:#edebe9 !default;
+$passwordWeakBg:#d13438 !default;
+$passwordMediumBg:#ffaa44 !default;
+$passwordStrongBg:#498205 !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$themePrimary !default;
+$buttonTextColor:$white !default;
+$buttonBorder:1px solid $themePrimary !default;
+$buttonHoverBg:$themeDarkAlt !default;
+$buttonTextHoverColor:$white !default;
+$buttonHoverBorderColor:$themeDarkAlt !default;
+$buttonActiveBg:$themeDark !default;
+$buttonTextActiveColor:$white !default;
+$buttonActiveBorderColor:$themeDark !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$neutralLighter !default;
+$plainButtonActiveBgColor:#edebe9 !default;
+
+$secondaryButtonBg:#d45c00 !default;
+$secondaryButtonTextColor:$white !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#00b7c3 !default;
+$infoButtonTextColor:$white !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#498205 !default;
+$successButtonTextColor:$white !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#ffaa44 !default;
+$warningButtonTextColor:$neutralPrimary !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#8378de !default;
+$helpButtonTextColor:$white !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#d13438 !default;
+$dangerButtonTextColor:$white !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$themePrimary !default;
+$linkButtonHoverColor:$themeDark !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:1px solid $neutralSecondary !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$themePrimary !default;
+$checkboxActiveBg:$themePrimary !default;
+$checkboxIconActiveColor:$white !default;
+$checkboxActiveHoverBg:$themeDark !default;
+$checkboxIconActiveHoverColor:$white !default;
+$checkboxActiveHoverBorderColor:$themeDark !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:1px solid $neutralSecondary !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$themePrimary !default;
+$radiobuttonActiveBg:$white !default;
+$radiobuttonIconActiveColor:$themePrimary !default;
+$radiobuttonActiveHoverBg:$white !default;
+$radiobuttonIconActiveHoverColor:$themeDark !default;
+$radiobuttonActiveHoverBorderColor:$themeDark !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:$white !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $neutralSecondary !default;
+$toggleButtonTextColor:$neutralPrimary !default;
+$toggleButtonIconColor:$neutralSecondary !default;
+$toggleButtonHoverBg:$neutralLighter !default;
+$toggleButtonHoverBorderColor:$neutralSecondary !default;
+$toggleButtonTextHoverColor:$neutralPrimary !default;
+$toggleButtonIconHoverColor:$neutralSecondary !default;
+$toggleButtonActiveBg:$highlightBg !default;
+$toggleButtonActiveBorderColor:$neutralSecondary !default;
+$toggleButtonTextActiveColor:$highlightTextColor !default;
+$toggleButtonIconActiveColor:$highlightTextColor !default;
+$toggleButtonActiveHoverBg:$highlightBg !default;
+$toggleButtonActiveHoverBorderColor:$neutralSecondary !default;
+$toggleButtonTextActiveHoverColor:$highlightTextColor !default;
+$toggleButtonIconActiveHoverColor:$highlightTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$neutralLighter !default;
+$inplaceTextHoverColor:$neutralPrimary !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#a4252c !default;
+$ratingCancelIconHoverColor:#a4252c !default;
+$ratingStarIconOffColor:$neutralPrimary !default;
+$ratingStarIconOnColor:$neutralPrimary !default;
+$ratingStarIconHoverColor:$themePrimary !default;
+
+//slider
+$sliderBg:#c8c6c4 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:4px !default;
+$sliderVerticalWidth:4px !default;
+$sliderHandleWidth:16px !default;
+$sliderHandleHeight:16px !default;
+$sliderHandleBg:$white !default;
+$sliderHandleBorder:2px solid $neutralSecondary !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$themeDark !default;
+$sliderHandleHoverBg:$white !default;
+$sliderRangeBg:$neutralSecondary !default;
+
+//calendar
+$calendarTableMargin:0 !default;
+$calendarPadding:.75rem !default;
+$calendarBg:$white !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$neutralPrimary !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:0 .5rem .5rem .5rem !default;
+$calendarHeaderBg:$white !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:0 none !default;
+$calendarHeaderTextColor:$neutralPrimary !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $themePrimary !default;
+
+$calendarCellDatePadding:1px !default;
+$calendarCellDateWidth:2rem !default;
+$calendarCellDateHeight:2rem !default;
+$calendarCellDateBorderRadius:$borderRadius !default;
+$calendarCellDateBorder:0 none !default;
+$calendarCellDateHoverBg:$neutralLighter !default;
+$calendarCellDateTodayBg:$themePrimary !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$white !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$white !default;
+$inputSwitchHandleOffBg:$neutralSecondary !default;
+$inputSwitchSliderOffHoverBg:$white !default;
+$inputSwitchSliderOnBg:$themePrimary !default;
+$inputSwitchSliderOnHoverBg:$themeDark !default;
+$inputSwitchHandleOnBg:$white !default;
+
+//panel
+$panelHeaderBorderColor: $neutralTertiary !default;
+$panelHeaderBorder:1px solid $neutralTertiary !default;
+$panelHeaderBg:$neutralLighterAlt !default;
+$panelHeaderTextColor:$neutralPrimary !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$neutralLighter !default;
+$panelHeaderHoverBorderColor:$neutralTertiary !default;
+$panelHeaderTextHoverColor:$neutralPrimary !default;
+
+$panelContentBorderColor: $neutralTertiary !default;
+$panelContentBorder:1px solid $neutralTertiary !default;
+$panelContentBg:$white !default;
+$panelContentEvenRowBg:$neutralLighterAlt !default;
+$panelContentTextColor:$neutralPrimary !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid $neutralTertiary !default;
+$panelFooterBg:$white !default;
+$panelFooterTextColor:$neutralPrimary !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:4px !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$neutralLighter !default;
+$accordionHeaderHoverBorderColor:$neutralTertiary !default;
+$accordionHeaderTextHoverColor:$neutralPrimary !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$neutralTertiary !default;
+$accordionHeaderTextActiveColor:$neutralPrimary !default;
+
+$accordionHeaderActiveHoverBg:$neutralLighter !default;
+$accordionHeaderActiveHoverBorderColor:$neutralTertiary !default;
+$accordionHeaderTextActiveHoverColor:$neutralPrimary !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:0 none !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$white !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $neutralTertiary !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent transparent transparent !default;
+$tabviewHeaderBg:$white !default;
+$tabviewHeaderTextColor:$neutralSecondary !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 .5rem -2px 0 !default;
+
+$tabviewHeaderHoverBg:$neutralLighter !default;
+$tabviewHeaderHoverBorderColor:transparent !default;
+$tabviewHeaderTextHoverColor:$neutralSecondary !default;
+
+$tabviewHeaderActiveBg:$white !default;
+$tabviewHeaderActiveBorderColor:$themePrimary !default;
+$tabviewHeaderTextActiveColor:$textColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:2px !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$neutralLighter !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$neutralSecondary !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$themePrimary !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$white !default;
+$paginatorTextColor:$neutralSecondary !default;
+$paginatorBorder:solid $neutralLighter !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$neutralSecondary !default;
+$paginatorElementHoverBg:$neutralLighter !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$neutralPrimary !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $neutralLighter !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$white !default;
+$tableHeaderTextColor:$neutralPrimary !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:.75rem .75rem !default;
+
+$tableHeaderCellPadding:.75rem .75rem !default;
+$tableHeaderCellBg:$white !default;
+$tableHeaderCellTextColor:$neutralPrimary !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $neutralLighter !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$neutralLighter !default;
+$tableHeaderCellTextHoverColor:$neutralPrimary !default;
+$tableHeaderCellIconColor:$neutralSecondary !default;
+$tableHeaderCellIconHoverColor:$neutralSecondary !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$neutralLighter !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$white !default;
+$tableBodyRowTextColor:$neutralPrimary !default;
+$tableBodyRowEvenBg:$neutralLighterAlt !default;
+$tableBodyRowHoverBg:$neutralLighter !default;
+$tableBodyRowTextHoverColor:$neutralPrimary !default;
+$tableBodyCellBorder:1px solid $neutralLighter !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:.75rem .75rem !default;
+
+$tableFooterCellPadding:.75rem .75rem !default;
+$tableFooterCellBg:$white !default;
+$tableFooterCellTextColor:$neutralPrimary !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $neutralLighter !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$themePrimary !default;
+$tableDragHelperBg: rgba($themePrimary, .16) !default;
+
+$tableFooterBorder:1px solid $neutralLighter !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$white !default;
+$tableFooterTextColor:$neutralPrimary !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:.75rem .75rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $neutralLighter !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$themePrimary !default;
+$fullCalendarEventBorderColor:$themePrimary !default;
+$fullCalendarEventBorder:1px solid $themePrimary !default;
+$fullCalendarEventTextColor:$white !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$neutralSecondary !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$themePrimary !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$neutralTertiary !default;
+
+//org chart
+$organizationChartConnectorColor:$neutralTertiary !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1rem !default;
+$messageTextFontSize:90% !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:90% !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:1.25rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:.5rem !default;
+$toastBorderWidth:0 !default;
+$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:600 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#f3f2f1 !default;
+$infoMessageBorder:0 none !default;
+$infoMessageTextColor:$neutralPrimary !default;
+$infoMessageIconColor:$neutralSecondary !default;
+$successMessageBg:#dff6dd !default;
+$successMessageBorder:0 none !default;
+$successMessageTextColor:$neutralPrimary !default;
+$successMessageIconColor:#107c10 !default;
+$warningMessageBg:#fff4ce !default;
+$warningMessageBorder:0 none !default;
+$warningMessageTextColor:$neutralPrimary !default;
+$warningMessageIconColor:#797775 !default;
+$errorMessageBg:#fde7e9 !default;
+$errorMessageBorder:0 none !default;
+$errorMessageTextColor:$neutralPrimary !default;
+$errorMessageIconColor:#a80000 !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px !default;
+
+//dialog
+$dialogHeaderBg:$white !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$neutralPrimary !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.5rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$white !default;
+$tooltipTextColor:$textColor !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$white !default;
+$stepsItemBorder:1px solid $neutralLighter !default;
+$stepsItemTextColor:$neutralSecondary !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$neutralPrimary !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:2px !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:#edebe9 !default;
+$progressBarValueBg:$themePrimary !default;
+$progressBarValueTextColor:$white !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$white !default;
+$menuBorder:1px solid #eeeeee !default;
+$menuTextColor:$neutralPrimary !default;
+$menuitemPadding:.75rem .5rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$neutralPrimary !default;
+$menuitemIconColor:$themePrimary !default;
+$menuitemTextHoverColor:$neutralPrimary !default;
+$menuitemIconHoverColor:$themePrimary !default;
+$menuitemHoverBg:$neutralLighter !default;
+$menuitemTextActiveColor:$highlightTextColor !default;
+$menuitemIconActiveColor:$themePrimary !default;
+$menuitemActiveBg:$highlightBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem .5rem !default;
+$submenuHeaderBg:$white !default;
+$submenuHeaderTextColor:$themePrimary !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$white !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$themePrimary !default;
+$badgeTextColor:$white !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$neutralTertiaryAlt !default;
+$carouselIndicatorHoverBg:$neutralQuaternaryAlt !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$neutralLighterAlt !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$neutralLighterAlt !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$neutralLighterAlt !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$neutralLighterAlt !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$neutralLighterAlt !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$neutralTertiaryAlt !default;
+$galleriaIndicatorHoverBg:$neutralQuaternaryAlt !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$neutralLighterAlt !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$neutralLighterAlt !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$neutralLight !default;
+
+//avatar
+$avatarBg:$neutralLight !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$neutralLight !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:$borderRadius !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$neutralLighterAlt !default;
+
+//skeleton
+$skeletonBg:$neutralLight !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$neutralLighterAlt !default;
+$splitterGutterHandleBg:$neutralLight !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $neutralPrimary !default;
+$speedDialActionHoverBg: $neutralSecondary !default;
+$speedDialActionTextColor: #ffffff !default;
+$speedDialActionTextHoverColor: #ffffff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$white};
+    --surface-b:#{$neutralLighterAlt};
+    --surface-c:#{$neutralLighter};
+    --surface-d:#{$neutralLight};
+    --surface-e:#{$white};
+    --surface-f:#{$white};
+    --text-color:#{$neutralPrimary};
+    --text-color-secondary:#{$neutralSecondary};
+    --primary-color:#{$themePrimary};
+    --primary-color-text:#{$white};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #f3f2f1;
+    --surface-100: #e1dfdd;
+    --surface-200: #bebbb8;
+    --surface-300: #a19f9d;
+    --surface-400: #797775;
+    --surface-500: #484644;
+    --surface-600: #323130;
+    --surface-700: #252423;
+    --surface-800: #1b1a19;
+    --surface-900: #11100f;
+    --gray-50: #f3f2f1;
+    --gray-100: #e1dfdd;
+    --gray-200: #bebbb8;
+    --gray-300: #a19f9d;
+    --gray-400: #797775;
+    --gray-500: #484644;
+    --gray-600: #323130;
+    --gray-700: #252423;
+    --gray-800: #1b1a19;
+    --gray-900: #11100f;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#faf9f8;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#edebe9;
+    --surface-hover:#f3f2f1;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/fluent/fluent-light/theme.scss b/themes/fluent/fluent-light/theme.scss
new file mode 100644
index 0000000..1f44de2
--- /dev/null
+++ b/themes/fluent/fluent-light/theme.scss
@@ -0,0 +1,4 @@
+@import './_variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/lara/lara-dark/_extensions.scss b/themes/lara/lara-dark/_extensions.scss
new file mode 100644
index 0000000..697177a
--- /dev/null
+++ b/themes/lara/lara-dark/_extensions.scss
@@ -0,0 +1,91 @@
+@mixin focused-ring($ring-color) {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
+}
+
+.p-button-label {
+    font-weight: 700;
+}
+
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+        }
+    }
+}
+
+.p-tabview {
+    .p-tabview-nav {
+        li {
+            .p-tabview-nav-link {
+                transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+            }
+        }
+
+        .p-tabview-ink-bar {
+            z-index: 1;
+            display: block;
+            position: absolute;
+            bottom: 0;
+            height: 2px;
+            background-color: $primaryColor;
+            transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+        }
+    }
+}
+
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-button {
+    &:focus {
+        @include focused-ring(rgba($buttonBg, .7));
+    }
+
+    &.p-button-secondary:enabled:focus {
+        @include focused-ring(rgba($secondaryButtonBg, .7));
+    }
+
+    &.p-button-success:enabled:focus {
+        @include focused-ring(rgba($successButtonBg, .7));
+    }
+
+    &.p-button-info:enabled:focus {
+        @include focused-ring(rgba($infoButtonBg, .7));
+    }
+
+    &.p-button-warning:enabled:focus {
+        @include focused-ring(rgba($warningButtonBg, .7));
+    }
+
+    &.p-button-help:enabled:focus {
+        @include focused-ring(rgba($helpButtonBg, .7));
+    }
+
+    &.p-button-danger:enabled:focus {
+        @include focused-ring(rgba($dangerButtonBg, .7));
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/lara/lara-dark/_variables.scss b/themes/lara/lara-dark/_variables.scss
new file mode 100644
index 0000000..3261b84
--- /dev/null
+++ b/themes/lara/lara-dark/_variables.scss
@@ -0,0 +1,880 @@
+$colors: (
+    "blue": #3B82F6,
+    "green": #22C55E,
+    "yellow": #EAB308,
+    "cyan": #06B6D4,
+    "pink": #EC4899,
+    "indigo": #6366F1,
+    "teal": #14B8A6,
+    "orange": #F97316,
+    "bluegray": #64748B,
+    "purple": #A855F7,
+    "red": #FF3D32,
+    "primary": $primaryColor
+);
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade500:#233752 !default;  
+$shade600:#0b213f !default;  //input bg, border, divider
+$shade700:#091a32 !default;  //menu bg
+$shade800:#071426 !default;  //elevated surface
+$shade900:#040d19 !default;  //ground surface
+
+$hoverBg:rgba(255,255,255,.03) !default;
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:6px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default; //spacing between inline elements
+$disabledOpacity:.4 !default; //opacity of a disabled item
+$maskBg:rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize:2rem !default;
+$errorColor:#FCA5A5 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 .2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: $hoverBg !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.75rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:1px solid $shade600 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$inputFilledBg !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:3rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.75rem 0 !default;
+$inputListItemPadding:.75rem 1.25rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.25rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:1px solid $shade600 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#eb9a9c !default;
+$passwordMediumBg:#ffcf91 !default;
+$passwordStrongBg:#93deac !default;
+
+//button
+$buttonPadding:.75rem 1.25rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:.75rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#CBD5E1 !default;
+$secondaryButtonTextColor:#1c2127 !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 1px scale-color($secondaryButtonBg, $lightness: 30%) !default;
+
+$infoButtonBg:#93C5FD !default;
+$infoButtonTextColor:#1c2127 !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 1px scale-color($infoButtonBg, $lightness: 30%) !default;
+
+$successButtonBg:#86EFAC !default;
+$successButtonTextColor:#1c2127 !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 1px scale-color($successButtonBg, $lightness: 30%) !default;
+
+$warningButtonBg:#FCD34D !default;
+$warningButtonTextColor:#1c2127 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 1px scale-color($warningButtonBg, $lightness: 30%) !default;
+
+$helpButtonBg:#D8B4FE !default;
+$helpButtonTextColor:#1c2127 !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
+
+$dangerButtonBg:#FCA5A5 !default;
+$dangerButtonTextColor:#1c2127 !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 1px scale-color($dangerButtonBg, $lightness: 30%) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:22px !default;
+$checkboxHeight:22px !default;
+$checkboxBorder:2px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:22px !default;
+$radiobuttonHeight:22px !default;
+$radiobuttonBorder:2px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$shade800 !default;
+$toggleButtonBorder:1px solid $shade600 !default;
+$toggleButtonTextColor:$shade000 !default;
+$toggleButtonIconColor:$shade100 !default;
+$toggleButtonHoverBg:$hoverBg !default;
+$toggleButtonHoverBorderColor:$shade600 !default;
+$toggleButtonTextHoverColor:$shade000 !default;
+$toggleButtonIconHoverColor:$shade100 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#F48FB1 !default;
+$ratingCancelIconHoverColor:#F48FB1 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade600 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:700 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade500 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$shade600 !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade600 !default;
+$panelHeaderBorder:1px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:700 !default;
+$panelHeaderPadding:1.25rem !default;
+$panelToggleableHeaderPadding:.75rem 1.25rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:1px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,0.01) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:0.75rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:4px !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade600 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade600 transparent !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$primaryColor !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$shade800 !default;
+$tabviewContentTextColor:$shade000 !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1.25rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1.25rem 0 !default;
+$cardFooterPadding:1.25rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$shade100 !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:1px !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade100 !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade000 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade600 !default;
+$tableHeaderBorderWidth:0 0 1px 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:700 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:700 !default;
+$tableHeaderCellBorder:1px solid $shade600 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:#0d1a2c !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:1px solid $shade600 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:700 !default;
+$tableFooterCellBorder:1px solid $shade600 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade600 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:700 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:1px 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade600 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid $shade600 !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$primaryTextColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade600 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1.25rem 1.75rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:400 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:1px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:none !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#e9e9ff !default;
+$infoMessageBorder:solid #696cff !default;
+$infoMessageTextColor:#696cff !default;
+$infoMessageIconColor:#696cff !default;
+$successMessageBg:#e4f8f0 !default;
+$successMessageBorder:solid #1ea97c !default;
+$successMessageTextColor:#1ea97c !default;
+$successMessageIconColor:#1ea97c !default;
+$warningMessageBg:#fff2e2 !default;
+$warningMessageBorder:solid #cc8925 !default;
+$warningMessageTextColor:#cc8925 !default;
+$warningMessageIconColor:#cc8925 !default;
+$errorMessageBg:#ffe7e6 !default;
+$errorMessageBorder:solid #ff5757 !default;
+$errorMessageTextColor:#ff5757 !default;
+$errorMessageIconColor:#ff5757 !default;
+
+//overlays
+$overlayContentBorder:1px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:700 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:0 none !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:700 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade700 !default;
+$menuBorder:1px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1.25rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextActiveColor:$highlightTextColor !default;
+$menuitemIconActiveColor:$highlightTextColor !default;
+$menuitemActiveBg:$highlightBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1.25rem !default;
+$submenuHeaderBg:$shade700 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid $shade600 !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade700 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:$hoverBg !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:#f8f9fa !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:#f8f9fa !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:#f8f9fa !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:#f8f9fa !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:#f8f9fa !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade600 !default;
+$galleriaIndicatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1.25rem 0 !default;
+$dividerHorizontalPadding:0 1.25rem !default;
+$dividerVerticalMargin:0 1.25rem !default;
+$dividerVerticalPadding:1.25rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$highlightBg !default;
+$scrollTopHoverBg:scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.03) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade000 !default;
+$speedDialActionHoverBg: $shade100 !default;
+$speedDialActionTextColor: $shade900 !default;
+$speedDialActionTextHoverColor: $shade900 !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #040d19;
+    --surface-50: #1d2530;
+    --surface-100: #363d47;
+    --surface-200: #4f565e;
+    --surface-300: #686e75;
+    --surface-400: #82868c;
+    --surface-500: #9b9ea3;
+    --surface-600: #b4b6ba;
+    --surface-700: #cdcfd1;
+    --surface-800: #e6e7e8;
+    --surface-900: #ffffff;
+    --gray-50: #e6e7e8;
+    --gray-100: #cdcfd1;
+    --gray-200: #b4b6ba;
+    --gray-300: #9b9ea3;
+    --gray-400: #82868c;
+    --gray-500: #686e75;
+    --gray-600: #4f565e;
+    --gray-700: #363d47;
+    --gray-800: #1d2530;
+    --gray-900: #040d19;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#040d19;
+    --surface-section:#040d19;
+    --surface-card:#071426;
+    --surface-overlay:#071426;
+    --surface-border:#0b213f;
+    --surface-hover:rgba(255,255,255,.03);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
\ No newline at end of file
diff --git a/themes/lara/lara-dark/blue/theme.scss b/themes/lara/lara-dark/blue/theme.scss
new file mode 100644
index 0000000..9eb121c
--- /dev/null
+++ b/themes/lara/lara-dark/blue/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #93C5FD !default;
+$primaryLightColor: rgba(147, 197, 253, .5) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #1c2127 !default;
+
+$highlightBg:rgba(147, 197, 253, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/lara/lara-dark/indigo/theme.scss b/themes/lara/lara-dark/indigo/theme.scss
new file mode 100644
index 0000000..c880e5a
--- /dev/null
+++ b/themes/lara/lara-dark/indigo/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #A5B4FC !default;
+$primaryLightColor: rgba(165, 180, 252, .5) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #1c2127 !default;
+
+$highlightBg:rgba(165, 180, 252, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/lara/lara-dark/purple/theme.scss b/themes/lara/lara-dark/purple/theme.scss
new file mode 100644
index 0000000..67c3d5d
--- /dev/null
+++ b/themes/lara/lara-dark/purple/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #C4B5FD !default;
+$primaryLightColor: rgba(196, 181, 253, .5) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #1c2127 !default;
+
+$highlightBg:rgba(196, 181, 253, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/lara/lara-dark/teal/theme.scss b/themes/lara/lara-dark/teal/theme.scss
new file mode 100644
index 0000000..af5fa73
--- /dev/null
+++ b/themes/lara/lara-dark/teal/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #5EEAD4 !default;
+$primaryLightColor: rgba(94, 234, 212, .5) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #1c2127 !default;
+
+$highlightBg:rgba(94, 234, 212, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/lara/lara-light/_extensions.scss b/themes/lara/lara-light/_extensions.scss
new file mode 100644
index 0000000..5c55943
--- /dev/null
+++ b/themes/lara/lara-light/_extensions.scss
@@ -0,0 +1,91 @@
+@mixin focused-ring($ring-color) {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 1.0);
+}
+
+.p-button-label {
+    font-weight: 700;
+}
+
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+        }
+    }
+}
+
+.p-tabview {
+    .p-tabview-nav {
+        li {
+            .p-tabview-nav-link {
+                transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+            }
+        }
+
+        .p-tabview-ink-bar {
+            z-index: 1;
+            display: block;
+            position: absolute;
+            bottom: 0;
+            height: 2px;
+            background-color: $primaryColor;
+            transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+        }
+    }
+}
+
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-button {
+    &:focus {
+        @include focused-ring(scale-color($buttonBg, $lightness: 50%));
+    }
+
+    &.p-button-secondary:enabled:focus {
+        @include focused-ring(scale-color($secondaryButtonBg, $lightness: 50%));
+    }
+
+    &.p-button-success:enabled:focus {
+        @include focused-ring(scale-color($successButtonBg, $lightness: 50%));
+    }
+
+    &.p-button-info:enabled:focus {
+        @include focused-ring(scale-color($infoButtonBg, $lightness: 50%));
+    }
+
+    &.p-button-warning:enabled:focus {
+        @include focused-ring(scale-color($warningButtonBg, $lightness: 50%));
+    }
+
+    &.p-button-help:enabled:focus {
+        @include focused-ring(scale-color($helpButtonBg, $lightness: 50%));
+    }
+
+    &.p-button-danger:enabled:focus {
+        @include focused-ring(scale-color($dangerButtonBg, $lightness: 50%));
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/lara/lara-light/_variables.scss b/themes/lara/lara-light/_variables.scss
new file mode 100644
index 0000000..37735cf
--- /dev/null
+++ b/themes/lara/lara-light/_variables.scss
@@ -0,0 +1,882 @@
+$colors: (
+    "blue": #3B82F6,
+    "green": #22C55E,
+    "yellow": #EAB308,
+    "cyan": #06B6D4,
+    "pink": #EC4899,
+    "indigo": #6366F1,
+    "teal": #14B8A6,
+    "orange": #F97316,
+    "bluegray": #64748B,
+    "purple": #A855F7,
+    "red": #FF3D32,
+    "primary": $primaryColor
+);
+
+//reused color variables
+$shade000:#ffffff !default;    //surface
+$shade100:#f8f9fa !default;    //header background
+$shade200:#e9ecef !default;    //hover background
+$shade300:#dee2e6 !default;    //border, divider
+$shade400:#ced4da !default;    //input border
+$shade500:#adb5bd !default;    //input icon
+$shade600:#6c757d !default;    //text secondary color
+$shade700:#495057 !default;    //text color
+$shade800:#343a40 !default;    //unused
+$shade900:#212529 !default;    //unused
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:6px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#e24c4c !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:$shade200 !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade800 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.75rem .75rem !default;
+$inputTextFontSize:1rem !default;
+
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade200 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$shade000 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth: 3rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.75rem 0 !default;
+$inputListItemPadding:.75rem 1.25rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.25rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade800 !default;
+$inputListHeaderBorder:1px solid $shade300 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;
+$inputOverlayShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+
+//password
+$passwordMeterBg:$shade300 !default;
+$passwordWeakBg:#ea5455 !default;
+$passwordMediumBg:#ff9f42 !default;
+$passwordStrongBg:#29c76f !default;
+
+//button
+$buttonPadding:.75rem 1.25rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:.75rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#64748B !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:#475569 !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:#475569 !default;
+$secondaryButtonActiveBg:#334155 !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:#334155 !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
+
+$infoButtonBg:#3B82F6 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:#2563EB !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:#2563EB !default;
+$infoButtonActiveBg:#1D4ED8 !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:#1D4ED8 !default;
+$infoButtonFocusShadow:0 0 0 0.2rem #BFDBFE !default;
+
+$successButtonBg:#22C55E !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:#16A34A !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:#16A34A !default;
+$successButtonActiveBg:#15803D !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:#15803D !default;
+$successButtonFocusShadow:0 0 0 0.2rem #BBF7D0 !default;
+
+$warningButtonBg:#F59E0B !default;
+$warningButtonTextColor:#ffffff !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:#D97706 !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:#D97706 !default;
+$warningButtonActiveBg:#B45309 !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:#B45309 !default;
+$warningButtonFocusShadow:0 0 0 0.2rem #FDE68A !default;
+
+$helpButtonBg:#A855F7 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:#9333EA !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:#9333EA !default;
+$helpButtonActiveBg:#7E22CE !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:#7E22CE !default;
+$helpButtonFocusShadow:0 0 0 0.2rem #E9D5FF !default;
+
+$dangerButtonBg:#EF4444 !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:#DC2626 !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:#DC2626 !default;
+$dangerButtonActiveBg:#B91C1C !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:#B91C1C !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem #FECACA !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:22px !default;
+$checkboxHeight:22px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:22px !default;
+$radiobuttonHeight:22px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade800 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade700 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#ea5455 !default;
+$ratingCancelIconHoverColor:#e73d3e !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade700 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade000 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade700 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade700 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade800 !default;
+$panelHeaderFontWeight:700 !default;
+$panelHeaderPadding:1.25rem !default;
+$panelToggleableHeaderPadding:.75rem 1.25rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade800 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg:scale-color($panelContentBg, $lightness: -1%) !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.75rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:4px !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$shade600 !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade800 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade800 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade800 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$shade500 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1.25rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1.25rem 0 !default;
+$cardFooterPadding:1.25rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade200 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade800 !default;
+$paginatorElementBorderRadius:50% !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade300 !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade800 !default;
+$tableHeaderFontWeight:700 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade800 !default;
+$tableHeaderCellFontWeight:700 !default;
+$tableHeaderCellBorder:1px solid $shade300 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade800 !default;
+$tableHeaderCellIconColor:$shade800 !default;
+$tableHeaderCellIconHoverColor:$shade800 !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:1px solid $shade300 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade800 !default;
+$tableFooterCellFontWeight:700 !default;
+$tableFooterCellBorder:1px solid $shade300 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade300 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade800 !default;
+$tableFooterFontWeight:700 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade300 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid $shade300 !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$primaryTextColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1.25rem 1.75rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:400 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#e9e9ff !default;
+$infoMessageBorder:solid #696cff !default;
+$infoMessageTextColor:#696cff !default;
+$infoMessageIconColor:#696cff !default;
+$successMessageBg:#e4f8f0 !default;
+$successMessageBorder:solid #1ea97c !default;
+$successMessageTextColor:#1ea97c !default;
+$successMessageIconColor:#1ea97c !default;
+$warningMessageBg:#fff2e2 !default;
+$warningMessageBorder:solid #cc8925 !default;
+$warningMessageTextColor:#cc8925 !default;
+$warningMessageIconColor:#cc8925 !default;
+$errorMessageBg:#ffe7e6 !default;
+$errorMessageBorder:solid #ff5757 !default;
+$errorMessageTextColor:#ff5757 !default;
+$errorMessageIconColor:#ff5757 !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade800 !default;
+$dialogHeaderFontWeight:700 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade700 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:1px solid $shade200 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:700 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.75rem 1.25rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade700 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$highlightTextColor !default;
+$menuitemIconActiveColor:$highlightTextColor !default;
+$menuitemActiveBg:$highlightBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1.25rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade800 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade400 !default;
+$carouselIndicatorHoverBg:$shade500 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade400 !default;
+$galleriaIndicatorHoverBg:$shade500 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1.25rem 0 !default;
+$dividerHorizontalPadding:0 1.25rem !default;
+$dividerVerticalMargin:0 1.25rem !default;
+$dividerVerticalPadding:1.25rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade300 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: #022354 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade700};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #FAFAFA;
+    --surface-100: #F5F5F5;
+    --surface-200: #EEEEEE;
+    --surface-300: #E0E0E0;
+    --surface-400: #BDBDBD;
+    --surface-500: #9E9E9E;
+    --surface-600: #757575;
+    --surface-700: #616161;
+    --surface-800: #424242;
+    --surface-900: #212121;
+    --gray-50: #FAFAFA;
+    --gray-100: #F5F5F5;
+    --gray-200: #EEEEEE;
+    --gray-300: #E0E0E0;
+    --gray-400: #BDBDBD;
+    --gray-500: #9E9E9E;
+    --gray-600: #757575;
+    --gray-700: #616161;
+    --gray-800: #424242;
+    --gray-900: #212121;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#eff3f8;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dfe7ef;
+    --surface-hover:#f6f9fc;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/lara/lara-light/blue/theme.scss b/themes/lara/lara-light/blue/theme.scss
new file mode 100644
index 0000000..d67e86a
--- /dev/null
+++ b/themes/lara/lara-light/blue/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #3B82F6 !default;
+$primaryLightColor: #BFDBFE !default;
+$primaryDarkColor: #3B82F6 !default;
+$primaryDarkerColor: #3B82F6 !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #EFF6FF !default;
+$highlightTextColor: $primaryDarkerColor !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/lara/lara-light/indigo/theme.scss b/themes/lara/lara-light/indigo/theme.scss
new file mode 100644
index 0000000..c6cf626
--- /dev/null
+++ b/themes/lara/lara-light/indigo/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #6366F1 !default;
+$primaryLightColor: #C7D2FE !default;
+$primaryDarkColor: #4F46E5 !default;
+$primaryDarkerColor: #4338CA !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #EEF2FF !default;
+$highlightTextColor: $primaryDarkerColor !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
diff --git a/themes/lara/lara-light/purple/theme.scss b/themes/lara/lara-light/purple/theme.scss
new file mode 100644
index 0000000..31b9185
--- /dev/null
+++ b/themes/lara/lara-light/purple/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #8B5CF6 !default;
+$primaryLightColor: #DDD6FE !default;
+$primaryDarkColor: #7C3AED !default;
+$primaryDarkerColor: #6D28D9 !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #F5F3FF !default;
+$highlightTextColor: $primaryDarkerColor !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/lara/lara-light/teal/theme.scss b/themes/lara/lara-light/teal/theme.scss
new file mode 100644
index 0000000..d8c04a3
--- /dev/null
+++ b/themes/lara/lara-light/teal/theme.scss
@@ -0,0 +1,12 @@
+$primaryColor: #14B8A6 !default;
+$primaryLightColor: #99F6E4 !default;
+$primaryDarkColor: #0D9488 !default;
+$primaryDarkerColor: #0F766E !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #F0FDFA !default;
+$highlightTextColor: $primaryDarkerColor !default;
+
+@import '../_variables';
+@import '../../../../designer/_components';
+@import '../_extensions';
\ No newline at end of file
diff --git a/themes/luna/_variables.scss b/themes/luna/_variables.scss
new file mode 100644
index 0000000..b89c09a
--- /dev/null
+++ b/themes/luna/_variables.scss
@@ -0,0 +1,869 @@
+$colors: (
+    "blue": #106EBE,
+    "green": #56A641,
+    "yellow": #F6BD30,
+    "cyan": #2CACD5,
+    "pink": #D8297D,
+    "indigo": #2C47D5,
+    "teal": #41A694,
+    "orange": #F68F30,
+    "bluegray": #657C8A,
+    "purple": #8378DE,
+    "red": #D82A13,
+    "primary": $primaryColor
+) !default;
+
+//global
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize: 1rem !default;
+$fontWeight: normal !default;
+$textColor: #dedede !default;
+$textSecondaryColor: #888888 !default;
+$borderRadius: 3px !default;
+$transitionDuration: .2s !default;
+$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$primeIconFontSize: 1rem !default;
+$divider: 1px solid #4b4b4b !default;
+$inlineSpacing: .5rem !default; //spacing between inline elements
+$disabledOpacity: .5 !default; //opacity of a disabled item
+$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize: 2rem !default;
+$errorColor: #e57373 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:lighten($primaryColor, 35%) !default;
+$focusOutline: 0 none !default;
+$focusOutlineOffset: 0 !default;
+$focusShadow: 0 0 0 0.1rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: #8888 !default;
+$actionIconHoverBg: transparent !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: #dedede !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding: 0.429rem 0.429rem !default;
+$inputTextFontSize: 1rem !default;
+$inputBg: #191919 !default;
+$inputTextColor: $textColor !default;
+$inputIconColor: $textSecondaryColor !default;
+$inputBorder: 1px solid #4b4b4b !default;
+$inputHoverBorderColor: $primaryColor !default;
+$inputFocusBorderColor: $primaryColor !default;
+$inputErrorBorderColor: $errorColor !default;
+$inputPlaceholderTextColor: #9b9b9b !default;
+$inputFilledBg:#4b4b4b !default;
+$inputFilledHoverBg:#4b4b4b !default;
+$inputFilledFocusBg:#4b4b4b !default;
+
+//input groups
+$inputGroupBg: #252525 !default;
+$inputGroupTextColor: $textSecondaryColor !default;
+$inputGroupAddOnMinWidth: 2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg: #323232 !default;
+$inputListTextColor: $textColor !default;
+$inputListBorder: 1px solid #4b4b4b !default;
+$inputListPadding: 0 !default;
+$inputListItemPadding: 0.429rem 0.857rem !default;
+$inputListItemBg: transparent !default;
+$inputListItemTextColor: $textColor !default;
+$inputListItemHoverBg: #4c4c4c !default;
+$inputListItemTextHoverColor: $textColor !default;
+$inputListItemBorder: 0 none !default;
+$inputListItemBorderRadius: 0 !default;
+$inputListItemMargin: 0 !default;
+$inputListItemFocusShadow: inset 0 0 0 .15rem lighten($primaryColor, 35%) !default;
+$inputListHeaderPadding: 0.429rem 0.857rem !default;
+$inputListHeaderMargin: 0 !default;
+$inputListHeaderBg: #252525 !default;
+$inputListHeaderTextColor: $textColor !default;
+$inputListHeaderBorder: 1px solid #191919 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder: 1px solid #191919 !default;
+$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//password
+$passwordMeterBg:#eaeaea !default;
+$passwordWeakBg:#E57373 !default;
+$passwordMediumBg:#FFB74D !default;
+$passwordStrongBg:#AED581 !default;
+
+//button
+$buttonPadding: .429rem 1rem !default;
+$buttonIconOnlyWidth: 2.357rem !default;
+$buttonIconOnlyPadding: .429rem 0 !default;
+$buttonBg: $primaryColor !default;
+$buttonTextColor: $primaryTextColor !default;
+$buttonBorder: 1px solid $primaryColor !default;
+$buttonHoverBg: $primaryDarkColor !default;
+$buttonTextHoverColor: $primaryTextColor !default;
+$buttonHoverBorderColor: $primaryDarkColor !default;
+$buttonActiveBg: $primaryDarkerColor !default;
+$buttonTextActiveColor: $primaryTextColor !default;
+$buttonActiveBorderColor: $primaryDarkerColor !default;
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius: 2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:#4c4c4c !default;
+$plainButtonActiveBgColor:#3c3c3c !default;
+
+$secondaryButtonBg:#B0BEC5 !default;
+$secondaryButtonTextColor:#121212 !default;
+$secondaryButtonBorder:1px solid #B0BEC5 !default;
+$secondaryButtonHoverBg:#90A4AE !default;
+$secondaryButtonTextHoverColor:#121212 !default;
+$secondaryButtonHoverBorderColor:#90A4AE !default;
+$secondaryButtonActiveBg:#78909C !default;
+$secondaryButtonTextActiveColor:#121212 !default;
+$secondaryButtonActiveBorderColor:#78909C !default;
+$secondaryButtonFocusShadow:0 0 0 0.1rem #CFD8DC !default;
+
+$infoButtonBg: #4FC3F7 !default;
+$infoButtonTextColor: #212529 !default;
+$infoButtonBorder: 1px solid #4FC3F7 !default;
+$infoButtonHoverBg: #29B6F6 !default;
+$infoButtonTextHoverColor: #212529 !default;
+$infoButtonHoverBorderColor: #29B6F6 !default;
+$infoButtonActiveBg: #03A9F4 !default;
+$infoButtonTextActiveColor: #212529 !default;
+$infoButtonActiveBorderColor: #03A9F4 !default;
+$infoButtonFocusShadow: 0 0 0 0.1rem #E1F5FE !default;
+
+$successButtonBg: #AED581 !default;
+$successButtonTextColor: #212529 !default;
+$successButtonBorder: 1px solid #AED581 !default;
+$successButtonHoverBg:#9CCC65 !default;
+$successButtonTextHoverColor: #212529 !default;
+$successButtonHoverBorderColor: #9CCC65 !default;
+$successButtonActiveBg: #8BC34A !default;
+$successButtonTextActiveColor: #212529 !default;
+$successButtonActiveBorderColor: #8BC34A !default;
+$successButtonFocusShadow: 0 0 0 0.1rem #F1F8E9 !default;
+
+$warningButtonBg: #FFB74D !default;
+$warningButtonTextColor: #212529 !default;
+$warningButtonBorder: 1px solid #FFB74D !default;
+$warningButtonHoverBg: #FFA726 !default;
+$warningButtonTextHoverColor: #212529 !default;
+$warningButtonHoverBorderColor: #FFA726 !default;
+$warningButtonActiveBg: #FF9800 !default;
+$warningButtonTextActiveColor: #212529 !default;
+$warningButtonActiveBorderColor: #FF9800 !default;
+$warningButtonFocusShadow: 0 0 0 0.1rem #FFFDE7 !default;
+
+$helpButtonBg:#CE93D8 !default;
+$helpButtonTextColor:#121212 !default;
+$helpButtonBorder:1px solid #CE93D8 !default;
+$helpButtonHoverBg:#BA68C8 !default;
+$helpButtonTextHoverColor:#121212 !default;
+$helpButtonHoverBorderColor:#BA68C8 !default;
+$helpButtonActiveBg:#AB47BC !default;
+$helpButtonTextActiveColor:#121212 !default;
+$helpButtonActiveBorderColor:#AB47BC !default;
+$helpButtonFocusShadow:0 0 0 1px #CE93D8 !default;
+
+$dangerButtonBg: #E57373 !default;
+$dangerButtonTextColor: #212529 !default;
+$dangerButtonBorder: 1px solid #E57373 !default;
+$dangerButtonHoverBg: #EF5350 !default;
+$dangerButtonTextHoverColor: #212529 !default;
+$dangerButtonHoverBorderColor: #EF5350 !default;
+$dangerButtonActiveBg: #F44336 !default;
+$dangerButtonTextActiveColor: #212529 !default;
+$dangerButtonActiveBorderColor: #F44336 !default;
+$dangerButtonFocusShadow: 0 0 0 0.1rem #FFEBEE !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder: $inputBorder !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor: $primaryColor !default;
+$checkboxActiveBg: $primaryColor !default;
+$checkboxIconActiveColor: $primaryTextColor !default;
+$checkboxActiveHoverBg: $primaryDarkerColor !default;
+$checkboxIconActiveHoverColor: $primaryTextColor !default;
+$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder: $inputBorder !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor: $primaryColor !default;
+$radiobuttonActiveBg: $primaryColor !default;
+$radiobuttonIconActiveColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth: 2rem !default;
+$colorPickerPreviewHeight: 2rem !default;
+$colorPickerBg: #323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor: #ffffff !default;
+
+//togglebutton
+$toggleButtonBg: #252525 !default;
+$toggleButtonBorder: 1px solid #252525 !default;
+$toggleButtonTextColor: #dedede !default;
+$toggleButtonIconColor: #888888 !default;
+$toggleButtonHoverBg: #4c4c4c !default;
+$toggleButtonHoverBorderColor: #4c4c4c !default;
+$toggleButtonTextHoverColor: #dedede !default;
+$toggleButtonIconHoverColor: #dedede !default;
+$toggleButtonActiveBg: $primaryColor !default;
+$toggleButtonActiveBorderColor: $primaryColor !default;
+$toggleButtonTextActiveColor: $primaryTextColor !default;
+$toggleButtonIconActiveColor: $primaryTextColor !default;
+$toggleButtonActiveHoverBg: $primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor: $primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
+$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
+
+//inplace
+$inplacePadding: $inputPadding !default;
+$inplaceHoverBg: #4c4c4c !default;
+$inplaceTextHoverColor: $textColor !default;
+
+//rating
+$ratingIconFontSize: 1.143rem !default;
+$ratingCancelIconColor: #e4018d !default;
+$ratingCancelIconHoverColor: #b5019f !default;
+$ratingStarIconOffColor: $textColor !default;
+$ratingStarIconOnColor: $primaryColor !default;
+$ratingStarIconHoverColor: $primaryColor !default;
+
+//slider
+$sliderBg: #4b4b4b !default;
+$sliderBorder: 0 none !default;
+$sliderHorizontalHeight: .286rem !default;
+$sliderVerticalWidth: 0.286rem !default;
+$sliderHandleWidth: 1.143rem !default;
+$sliderHandleHeight: 1.143rem !default;
+$sliderHandleBg: #4c4c4c !default;
+$sliderHandleBorder: 2px solid $primaryColor !default;
+$sliderHandleBorderRadius: 100% !default;
+$sliderHandleHoverBorderColor: $primaryColor !default;
+$sliderHandleHoverBg: $primaryColor !default;
+$sliderRangeBg: $primaryColor !default;
+
+//calendar
+$calendarTableMargin: 0.857rem 0 !default;
+$calendarPadding: 0.857rem !default;
+$calendarBg: $inputListBg !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor: $inputListTextColor !default;
+$calendarBorder: $inputListBorder !default;
+$calendarOverlayBorder: $inputOverlayBorder !default;
+
+$calendarHeaderPadding: .5rem !default;
+$calendarHeaderBg: $inputListHeaderBg !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder: 0 none !default;
+$calendarHeaderTextColor: $inputListHeaderTextColor !default;
+$calendarHeaderFontWeight: 700 !default;
+$calendarHeaderCellPadding: .5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding: .5rem !default;
+$calendarCellDateWidth: 2.5rem !default;
+$calendarCellDateHeight: 2.5rem !default;
+$calendarCellDateBorderRadius: $borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg: #4c4c4c !default;
+$calendarCellDateTodayBg: $primaryDarkerColor !default;
+$calendarCellDateTodayBorderColor: transparent !default;
+$calendarCellDateTodayTextColor: $primaryTextColor !default;
+
+$calendarButtonBarPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerElementPadding: 0 .429rem !default;
+$calendarTimePickerTimeFontSize: 1.286rem !default;
+
+$calendarBreakpoint: 769px !default;
+$calendarCellDatePaddingSM: 0 !default;
+
+//input switch
+$inputSwitchWidth: 3rem !default;
+$inputSwitchHeight: 1.75rem !default;
+$inputSwitchBorderRadius: 30px !default;
+$inputSwitchHandleWidth: 1.250rem !default;
+$inputSwitchHandleHeight: 1.250rem !default;
+$inputSwitchHandleBorderRadius: 50% !default;
+$inputSwitchSliderPadding: .25rem !default;
+$inputSwitchSliderOffBg: #4b4b4b !default;
+$inputSwitchHandleOffBg: #323232 !default;
+$inputSwitchSliderOffHoverBg: #4b4b4b !default;
+$inputSwitchSliderOnBg: $primaryColor !default;
+$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
+$inputSwitchHandleOnBg: #323232 !default;
+
+//panel
+$panelHeaderBorderColor: #191919 !default;
+$panelHeaderBorder: 1px solid #191919 !default;
+$panelHeaderBg: #191919 !default;
+$panelHeaderTextColor: #dedede !default;
+$panelHeaderFontWeight: 700 !default;
+$panelHeaderPadding: 0.857rem 1rem !default;
+$panelToggleableHeaderPadding: 0.857rem 1rem !default;
+
+$panelHeaderHoverBg: #191919 !default;
+$panelHeaderHoverBorderColor: #191919 !default;
+$panelHeaderTextHoverColor: $primaryColor !default;
+
+$panelContentBorderColor: #191919 !default;
+$panelContentBorder: 1px solid #191919 !default;
+$panelContentBg: #323232 !default;
+$panelContentEvenRowBg:#323232 !default;
+$panelContentTextColor: #dedede !default;
+$panelContentPadding: 0.571rem 1rem !default;
+
+$panelFooterBorder: 1px solid #191919 !default;
+$panelFooterBg: #323232 !default;
+$panelFooterTextColor: #dedede !default;
+$panelFooterPadding: 0.571rem 1rem !default;
+
+//accordion
+$accordionSpacing: 2px !default;
+$accordionHeaderBorder: $panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor: $panelHeaderTextColor !default;
+$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
+$accordionHeaderPadding: $panelHeaderPadding !default;
+
+$accordionHeaderHoverBg: #191919 !default;
+$accordionHeaderHoverBorderColor:#191919 !default;
+$accordionHeaderTextHoverColor: $primaryColor !default;
+
+$accordionHeaderActiveBg: $primaryColor !default;
+$accordionHeaderActiveBorderColor: $primaryColor !default;
+$accordionHeaderTextActiveColor: $primaryTextColor !default;
+
+$accordionHeaderActiveHoverBg: $primaryDarkerColor !default;
+$accordionHeaderActiveHoverBorderColor: $primaryDarkerColor !default;
+$accordionHeaderTextActiveHoverColor: $primaryTextColor !default;
+
+$accordionContentBorder: $panelContentBorder !default;
+$accordionContentBg: $panelContentBg !default;
+$accordionContentTextColor: $panelContentTextColor !default;
+$accordionContentPadding: $panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder: 0 none !default;
+$tabviewNavBorderWidth: 1px !default;
+$tabviewNavBg: transparent !default;
+
+$tabviewHeaderSpacing: 2px !default;
+$tabviewHeaderBorder: $panelHeaderBorder !default;
+$tabviewHeaderBorderWidth: 1px !default;
+$tabviewHeaderBorderColor: #191919 !default;
+$tabviewHeaderBg:$panelHeaderBg !default;
+$tabviewHeaderTextColor: $panelHeaderTextColor !default;
+$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
+$tabviewHeaderPadding: $panelHeaderPadding !default;
+$tabviewHeaderMargin: 0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg: #191919 !default;
+$tabviewHeaderHoverBorderColor: #191919 !default;
+$tabviewHeaderTextHoverColor: $primaryColor !default;
+
+$tabviewHeaderActiveBg: $primaryColor !default;
+$tabviewHeaderActiveBorderColor: $primaryColor !default;
+$tabviewHeaderTextActiveColor: $primaryTextColor !default;
+
+$tabviewContentBorder: $panelContentBorder !default;
+$tabviewContentBg: $panelContentBg !default;
+$tabviewContentTextColor: $panelContentTextColor !default;
+$tabviewContentPadding: $panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight: .25rem !default;
+$fileUploadContentPadding: $panelContentPadding !default;
+
+//scrollpanel
+$scrollPanelTrackBorder: 0 none !default;
+$scrollPanelTrackBg: #3f3f3f !default;
+
+//card
+$cardBodyPadding: 1rem !default;
+$cardTitleFontSize: 1.5rem !default;
+$cardTitleFontWeight: 700 !default;
+$cardSubTitleFontWeight: 700 !default;
+$cardSubTitleColor: $textSecondaryColor !default;
+$cardContentPadding: 1rem 0 !default;
+$cardFooterPadding: 1rem 0 0 0 !default;
+$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg: #252525 !default;
+$paginatorTextColor: $textColor !default;
+$paginatorBorder: solid #191919 !default;
+$paginatorBorderWidth: 1px !default;
+$paginatorPadding: 0 !default;
+$paginatorElementWidth: $buttonIconOnlyWidth !default;
+$paginatorElementHeight: $buttonIconOnlyWidth !default;
+$paginatorElementBg: transparent !default;
+$paginatorElementBorder: 0 none !default;
+$paginatorElementIconColor: #dedede !default;
+$paginatorElementHoverBg: #e0e0e0 !default;
+$paginatorElementHoverBorderColor: transparent !default;
+$paginatorElementIconHoverColor: #4c4c4c !default;
+$paginatorElementBorderRadius: 0 !default;
+$paginatorElementMargin: 0 !default;
+$paginatorElementPadding: 0 !default;
+
+//table
+$tableHeaderBorder: $panelHeaderBorder !default;
+$tableHeaderBorderWidth: 1px 1px 0 1px !default;
+$tableHeaderBg: $panelHeaderBg !default;
+$tableHeaderTextColor: $panelHeaderTextColor !default;
+$tableHeaderFontWeight: $panelHeaderFontWeight !default;
+$tableHeaderPadding: $panelHeaderPadding !default;
+
+$tableHeaderCellPadding: 0.571rem 0.857rem !default;
+$tableHeaderCellBg: #252525 !default;
+$tableHeaderCellTextColor: $textColor !default;
+$tableHeaderCellFontWeight: 700 !default;
+$tableHeaderCellBorder: 1px solid #191919 !default;
+$tableHeaderCellBorderWidth: 1px 1px 1px 1px !default;
+$tableHeaderCellHoverBg: #4c4c4c !default;
+$tableHeaderCellTextHoverColor: #dedede !default;
+$tableHeaderCellIconColor: $textSecondaryColor !default;
+$tableHeaderCellIconHoverColor: #dedede !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize: 1.143rem !default;
+
+$tableBodyRowBg: #323232 !default;
+$tableBodyRowTextColor: $textColor !default;
+$tableBodyRowEvenBg: #323232 !default;
+$tableBodyRowHoverBg: #4c4c4c !default;
+$tableBodyRowTextHoverColor: $textColor !default;
+$tableBodyCellBorder: 1px solid #191919 !default;
+$tableBodyCellBorderWidth: 1px !default;
+$tableBodyCellPadding: 0.571rem 0.857rem !default;
+
+$tableFooterCellPadding: 0.571rem 0.857rem !default;
+$tableFooterCellBg: #252525 !default;
+$tableFooterCellTextColor: $textColor !default;
+$tableFooterCellFontWeight: 700 !default;
+$tableFooterCellBorder: 1px solid #191919 !default;
+$tableFooterCellBorderWidth: 1px !default;
+$tableResizerHelperBg: $primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder: $panelFooterBorder !default;
+$tableFooterBorderWidth: 0 1px 1px 1px !default;
+$tableFooterBg: $panelFooterBg !default;
+$tableFooterTextColor: $panelFooterTextColor !default;
+$tableFooterFontWeight: normal !default;
+$tableFooterPadding: $panelFooterPadding !default;
+
+$tableCellContentAlignment: left !default;
+$tableTopPaginatorBorderWidth: 1px 1px 0 1px !default;
+$tableBottomPaginatorBorderWidth: 0 1px 1px 1px !default;
+
+$tableScaleSM: 0.85 !default;
+$tableScaleLG: 1.25 !default;
+
+//dataview
+$dataViewContentPadding: 0 !default;
+$dataViewContentBorder: 0 none !default;
+$dataViewListItemBorder: $divider !default;
+$dataViewListItemBorderWidth: 1px !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder: $divider !default;
+$dataScrollerListItemBorderWidth: 1px !default;
+
+//schedule
+$fullCalendarEventBg: $primaryDarkColor !default;
+$fullCalendarEventBorderColor:$primaryDarkColor !default;
+$fullCalendarEventBorder: 1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor: $primaryTextColor !default;
+
+//tree
+$treeContainerPadding: 0.286rem !default;
+$treeNodePadding: 0.143rem !default;
+$treeNodeContentPadding: 0 !default;
+$treeNodeChildrenPadding: 0 0 0 1rem !default;
+$treeNodeIconColor: $textSecondaryColor !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$highlightBg !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:#191919 !default;
+
+//org chart
+$organizationChartConnectorColor: #191919 !default;
+
+//messages
+$messageMargin: 1rem 0 !default;
+$messagePadding: 1rem !default;
+$messageBorderWidth: 0 !default;
+$messageIconFontSize: 1.5rem !default;
+$messageTextFontSize: 1rem !default;
+$messageTextFontWeight: normal !default;
+
+//message
+$inlineMessagePadding: .5rem !default;
+$inlineMessageMargin: 0 !default;
+$inlineMessageIconFontSize: 1rem !default;
+$inlineMessageTextFontSize: 1rem !default;
+$inlineMessageBorderWidth: 0 !default;
+
+//toast
+$toastIconFontSize: 2rem !default;
+$toastMessageTextMargin: 0 0 0 $inlineSpacing !default;
+$toastMargin: 0 0 1rem 0 !default;
+$toastPadding: 1rem !default;
+$toastBorderWidth: 0 !default;
+$toastShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$toastOpacity: .9 !default;
+$toastTitleFontWeight: 700 !default;
+$toastDetailMargin: $inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg: #7fbcec !default;
+$infoMessageBorder: 0 none !default;
+$infoMessageTextColor: #212121 !default;
+$infoMessageIconColor: #212121 !default;
+$successMessageBg: #b7d8b7 !default;
+$successMessageBorder: 0 none !default;
+$successMessageTextColor: #212121 !default;
+$successMessageIconColor: #212121 !default;
+$warningMessageBg: #ffe399 !default;
+$warningMessageBorder: 0 none !default;
+$warningMessageTextColor: #212121 !default;
+$warningMessageIconColor: #212121 !default;
+$errorMessageBg: #f8b7bd !default;
+$errorMessageBorder: 0 none !default;
+$errorMessageTextColor: #212121 !default;
+$errorMessageIconColor: #212121 !default;
+
+//overlays
+$overlayContentBorder: 1px solid #191919 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow: 0 0 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//dialog
+$dialogHeaderBg: $panelHeaderBg !default;
+$dialogHeaderBorder: $panelHeaderBorder !default;
+$dialogHeaderTextColor: $panelHeaderTextColor !default;
+$dialogHeaderFontWeight: $panelHeaderFontWeight !default;
+$dialogHeaderFontSize: 1rem !default;
+$dialogHeaderPadding: 1rem !default;
+$dialogContentPadding: 1rem !default;
+$dialogFooterBorder: $panelFooterBorder !default;
+$dialogFooterPadding: $panelFooterPadding !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem .571rem 1rem !default;
+
+//tooltip
+$tooltipBg: #4c4c4c !default;
+$tooltipTextColor: #dedede !default;
+$tooltipPadding: $inputPadding !default;
+
+//steps
+$stepsItemBg: #191919 !default;
+$stepsItemBorder: 1px solid #191919 !default;
+$stepsItemTextColor: $textSecondaryColor !default;
+$stepsItemNumberWidth: 2rem !default;
+$stepsItemNumberHeight: 2rem !default;
+$stepsItemNumberFontSize: 1.143rem !default;
+$stepsItemNumberColor: $textColor !default;
+$stepsItemNumberBorderRadius: 50% !default;
+$stepsItemActiveFontWeight: 700 !default;
+
+//progressbar
+$progressBarHeight: 24px !default;
+$progressBarBorder: 0 none !default;
+$progressBarBg: #eaeaea !default;
+$progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth: 12.5rem !default;
+$menuBg: #252525 !default;
+$menuBorder: 1px solid #191919 !default;
+$menuTextColor: $textColor !default;
+$menuitemPadding: 0.857rem !default;
+$menuitemBorderRadius: 0 !default;
+$menuitemTextColor: #dedede !default;
+$menuitemIconColor: #dedede !default;
+$menuitemTextHoverColor: #dedede !default;
+$menuitemIconHoverColor: #dedede !default;
+$menuitemHoverBg: #4c4c4c !default;
+$menuitemTextActiveColor: $primaryTextColor !default;
+$menuitemIconActiveColor: $primaryTextColor !default;
+$menuitemActiveBg: $primaryColor !default;
+$menuitemSubmenuIconFontSize: .875rem !default;
+$submenuHeaderMargin: 0 !default;
+$submenuHeaderPadding: 0.857rem !default;
+$submenuHeaderBg: #191919 !default;
+$submenuHeaderTextColor: $textColor !default;
+$submenuHeaderBorderRadius: $borderRadius !default;
+$submenuHeaderFontWeight: 700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder: 1px solid #191919 !default;
+$overlayMenuShadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$verticalMenuPadding: 0 !default;
+$menuSeparatorMargin: 0 !default;
+
+$breadcrumbPadding: 0.571rem 1rem !default;
+$breadcrumbBg: $menuBg !default;
+$breadcrumbBorder: $menuBorder !default;
+$breadcrumbItemTextColor: $menuitemTextColor !default;
+$breadcrumbItemIconColor: $menuitemIconColor !default;
+$breadcrumbLastItemTextColor: $menuitemTextColor !default;
+$breadcrumbLastItemIconColor: $menuitemIconColor !default;
+$breadcrumbSeparatorColor: $menuitemTextColor !default;
+
+$horizontalMenuPadding: .5rem !default;
+$horizontalMenuBg: $menuBg !default;
+$horizontalMenuBorder: $menuBorder !default;
+$horizontalMenuTextColor: $menuTextColor !default;
+$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg: $primaryColor !default;
+$badgeTextColor: $primaryTextColor !default;
+$badgeMinWidth: 1.5rem !default;
+$badgeHeight: 1.5rem !default;
+$badgeFontWeight: 700 !default;
+$badgeFontSize: .75rem !default;
+
+$tagPadding: .25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding: 1rem !default;
+$carouselIndicatorBg: #4b4b4b !default;
+$carouselIndicatorHoverBg: #4c4c4c !default;
+$carouselIndicatorBorderRadius: 0 !default;
+$carouselIndicatorWidth: 2rem !default;
+$carouselIndicatorHeight: .5rem !default;
+
+//galleria
+$galleriaMaskBg: rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin: .5rem !default;
+$galleriaCloseIconFontSize: 2rem !default;
+$galleriaCloseIconBg: transparent !default;
+$galleriaCloseIconColor: #ebedef !default;
+$galleriaCloseIconHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor: #ebedef !default;
+$galleriaCloseIconWidth: 4rem !default;
+$galleriaCloseIconHeight: 4rem !default;
+$galleriaCloseIconBorderRadius: 50% !default;
+
+$galleriaItemNavigatorBg: rgba(0,0,0,.2) !default;
+$galleriaItemNavigatorColor: #aeb6bf !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize: 2rem !default;
+$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3) !default;
+$galleriaItemNavigatorHoverColor: #ebedef !default;
+$galleriaItemNavigatorWidth: 4rem !default;
+$galleriaItemNavigatorHeight: 4rem !default;
+$galleriaItemNavigatorBorderRadius: $borderRadius !default;
+
+$galleriaCaptionBg: rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor: #ebedef !default;
+$galleriaCaptionPadding: 1rem !default;
+
+$galleriaIndicatorsPadding: 1rem !default;
+$galleriaIndicatorBg: #4b4b4b !default;
+$galleriaIndicatorHoverBg: #4c4c4c !default;
+$galleriaIndicatorBorderRadius: 50% !default;
+$galleriaIndicatorWidth: 1rem !default;
+$galleriaIndicatorHeight: 1rem !default;
+$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem: rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg: rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding: 1rem .25rem !default;
+$galleriaThumbnailNavigatorBg: transparent !default;
+$galleriaThumbnailNavigatorColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorBorderRadius: 50% !default;
+$galleriaThumbnailNavigatorWidth: 2rem !default;
+$galleriaThumbnailNavigatorHeight: 2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:#4b4b4b !default;
+
+//avatar
+$avatarBg:#4b4b4b !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:#4b4b4b !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius:16px !default;
+
+//scrollTop
+$scrollTopBg:$primaryColor !default;
+$scrollTopHoverBg:$primaryDarkColor !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$primaryTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:#191919 !default;
+$splitterGutterHandleBg:#4b4b4b !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: #474747 !default;
+$speedDialActionHoverBg: #4d4d4d !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a: #191919;
+    --surface-b: #191919;
+    --surface-c: #4c4c4c;
+    --surface-d: #4b4b4b;
+    --surface-e: #323232;
+    --surface-f: #323232;
+    --text-color: #dedede;
+    --text-color-secondary: #888888;
+    --primary-color: #{$primaryColor};
+    --primary-color-text: #{$primaryTextColor};
+    --font-family: #{$fontFamily};
+    --surface-0: #191919;
+    --surface-50: #303030;
+    --surface-100: #474747;
+    --surface-200: #5e5e5e;
+    --surface-300: #757575;
+    --surface-400: #8c8c8c;
+    --surface-500: #a3a3a3;
+    --surface-600: #bababa;
+    --surface-700: #d1d1d1;
+    --surface-800: #e8e8e8;
+    --surface-900: #ffffff;
+    --gray-50: #e8e8e8;
+    --gray-100: #d1d1d1;
+    --gray-200: #bababa;
+    --gray-300: #a3a3a3;
+    --gray-400: #8c8c8c;
+    --gray-500: #757575;
+    --gray-600: #5e5e5e;
+    --gray-700: #474747;
+    --gray-800: #303030;
+    --gray-900: #191919;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#191919;
+    --surface-section:#191919;
+    --surface-card:#323232;
+    --surface-overlay:#323232;
+    --surface-border:#4b4b4b;
+    --surface-hover:#4c4c4c;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
\ No newline at end of file
diff --git a/themes/luna/luna-amber/_extensions.scss b/themes/luna/luna-amber/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/luna/luna-amber/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/luna/luna-amber/_fonts.scss b/themes/luna/luna-amber/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/luna/luna-amber/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/luna/luna-amber/_variables.scss b/themes/luna/luna-amber/_variables.scss
new file mode 100644
index 0000000..6f7b62e
--- /dev/null
+++ b/themes/luna/luna-amber/_variables.scss
@@ -0,0 +1,11 @@
+//main color scheme
+$primaryColor: #FFE082 !default;
+$primaryDarkColor: #FFD54F !default;
+$primaryDarkerColor: #FFCA28 !default;
+$primaryTextColor: #212529 !default;
+
+//highlight
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/luna/luna-amber/theme.scss b/themes/luna/luna-amber/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/luna/luna-amber/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/luna/luna-blue/_extensions.scss b/themes/luna/luna-blue/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/luna/luna-blue/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/luna/luna-blue/_fonts.scss b/themes/luna/luna-blue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/luna/luna-blue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/luna/luna-blue/_variables.scss b/themes/luna/luna-blue/_variables.scss
new file mode 100644
index 0000000..25f58b7
--- /dev/null
+++ b/themes/luna/luna-blue/_variables.scss
@@ -0,0 +1,11 @@
+//main color scheme
+$primaryColor: #81D4FA !default;
+$primaryDarkColor: #4FC3F7 !default;
+$primaryDarkerColor: #29B6F6 !default;
+$primaryTextColor: #212529 !default;
+
+//highlight
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/luna/luna-blue/theme.scss b/themes/luna/luna-blue/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/luna/luna-blue/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/luna/luna-green/_extensions.scss b/themes/luna/luna-green/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/luna/luna-green/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/luna/luna-green/_fonts.scss b/themes/luna/luna-green/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/luna/luna-green/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/luna/luna-green/_variables.scss b/themes/luna/luna-green/_variables.scss
new file mode 100644
index 0000000..7dcc2d5
--- /dev/null
+++ b/themes/luna/luna-green/_variables.scss
@@ -0,0 +1,11 @@
+//main color scheme
+$primaryColor: #C5E1A5 !default;
+$primaryDarkColor: #AED581 !default;
+$primaryDarkerColor: #9CCC65 !default;
+$primaryTextColor: #212529 !default;
+
+//highlight
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/luna/luna-green/theme.scss b/themes/luna/luna-green/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/luna/luna-green/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/luna/luna-pink/_extensions.scss b/themes/luna/luna-pink/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/luna/luna-pink/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/luna/luna-pink/_fonts.scss b/themes/luna/luna-pink/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/luna/luna-pink/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/luna/luna-pink/_variables.scss b/themes/luna/luna-pink/_variables.scss
new file mode 100644
index 0000000..d568328
--- /dev/null
+++ b/themes/luna/luna-pink/_variables.scss
@@ -0,0 +1,11 @@
+//main color scheme
+$primaryColor: #F48FB1 !default;
+$primaryDarkColor: #F06292 !default;
+$primaryDarkerColor: #EC407A !default;
+$primaryTextColor: #212529 !default;
+
+//highlight
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/luna/luna-pink/theme.scss b/themes/luna/luna-pink/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/luna/luna-pink/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/material/_compact.scss b/themes/material/_compact.scss
new file mode 100644
index 0000000..2d7718c
--- /dev/null
+++ b/themes/material/_compact.scss
@@ -0,0 +1,90 @@
+$actionIconWidth:2rem;
+$actionIconHeight:2rem;
+
+$inputPadding: .75rem .75rem;
+$inputListItemPadding: .75rem .75rem;
+$inputListHeaderPadding:.75rem;
+
+$multiselectHeaderIconWidth:2.25rem;
+$multiselectHeaderIconHeight:.2.25rem;
+
+$buttonPadding:0.571rem .75rem;
+$buttonIconOnlyWidth:2.25rem;
+$buttonIconOnlyPadding:0.571rem;
+
+$ratingIconFontSize:1rem;
+
+$calendarCellDateWidth:2.25rem;
+$calendarCellDateHeight:2.25rem;
+
+$calendarActionIconWidth:2.25rem;
+$calendarActionIconHeight:2.25rem;
+
+$calendarButtonBarPadding:.75rem 0;
+
+$panelHeaderPadding:.75rem;
+$panelContentPadding:.75rem;
+$panelFooterPadding:.75rem .75rem;
+
+$accordionHeaderPadding:1.25rem;
+$accordionContentPadding:.75rem 1.25rem;
+
+$tabviewHeaderPadding:.75rem 1.25rem;
+$tabviewContentPadding:.75rem;
+
+$cardBodyPadding:.75rem;
+$cardContentPadding:.75rem 0;
+$cardFooterPadding:.75rem 0 0 0;
+$paginatorPadding:.375rem .75rem;
+
+$tableHeaderPadding:.75rem .75rem;
+$tableHeaderCellPadding:.75rem .75rem;
+$tableBodyCellPadding:.75rem .75rem;
+$tableFooterCellPadding:.75rem .75rem;
+$tableFooterPadding:.75rem .75rem;
+
+$dataViewContentPadding:.75rem;
+$treeNodeContentPadding:.25rem;
+
+$messageMargin:.75rem 0;
+$messagePadding: 1rem 1.25rem;
+$messageIconFontSize:1.5rem;
+$messageCloseIconWidth:2.25rem;
+$messageCloseIconHeight:2.25rem;
+$inlineMessagePadding:.75rem .75rem;
+
+$toastPadding:1.25rem;
+
+$toastCloseIconWidth:1.5rem;
+$toastCloseIconHeight:1.5rem;
+
+$dialogHeaderPadding:1.25rem;
+$dialogContentPadding: 0 1.25rem 1.25rem 1.25rem;
+$dialogFooterPadding:.75rem 1.25rem;
+
+$dialogHeaderActionIconWidth:2.25rem;
+$dialogHeaderActionIconHeight:2.25rem;
+
+$confirmPopupContentPadding:1.25rem;
+$confirmPopupFooterPadding:0 1.25rem .75rem 1.25rem;
+
+$sidebarCloseIconWidth:2.25rem;
+$sidebarCloseIconHeight:2.25rem;
+
+$overlayPanelCloseIconWidth:2.25rem;
+$overlayPanelCloseIconHeight:2.25rem;
+
+$menuitemPadding:.75rem .75rem;
+$submenuHeaderPadding:.75rem;
+
+$breadcrumbPadding:.75rem;
+
+$horizontalMenuPadding:.75rem;
+
+$horizontalMenuRootMenuitemPadding:.75rem;
+
+$menubarButtonWidth:2.25rem;
+$menubarButtonHeight:2.25rem;
+
+$carouselNavIconWidth:2.25rem;
+$carouselNavIconHeight:2.25rem;
\ No newline at end of file
diff --git a/themes/material/extensions/_accordion.scss b/themes/material/extensions/_accordion.scss
new file mode 100644
index 0000000..35f02b5
--- /dev/null
+++ b/themes/material/extensions/_accordion.scss
@@ -0,0 +1,55 @@
+.p-accordion {
+    .p-accordion-tab {
+        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+        margin-bottom: 0;
+        border-radius: 0;
+        position: relative;
+        transition: margin-bottom 225ms;
+
+        &:first-child {
+            border-top-left-radius: $borderRadius;
+            border-top-right-radius: $borderRadius;
+        }
+
+        &:last-child {
+            border-bottom-left-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+
+        .p-accordion-toggle-icon {
+            order: 1;
+            margin-left: auto;
+            transition: transform $transitionDuration;
+        }
+
+        &:not(.p-accordion-tab-active) {
+            .p-accordion-header-link {
+                &:focus {
+                    background: $accordionHeaderHoverBg;
+                }
+            }
+
+            .p-accordion-toggle-icon {
+                transform: rotate(-270deg);
+            }
+        }
+
+        &.p-accordion-tab-active {
+            margin-bottom: 1rem;
+            
+            .p-accordion-toggle-icon {
+                transform: rotate(-180deg);
+            }
+        }
+
+        .p-accordion-header {
+            &.p-disabled {
+                opacity: 1;
+    
+                .p-accordion-header-link > * {
+                    opacity: $disabledOpacity;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_autocomplete.scss b/themes/material/extensions/_autocomplete.scss
new file mode 100644
index 0000000..b8a4423
--- /dev/null
+++ b/themes/material/extensions/_autocomplete.scss
@@ -0,0 +1,72 @@
+.p-autocomplete {
+    &.p-autocomplete-multiple {
+        .p-autocomplete-multiple-container {
+            &:not(.p-disabled).p-focus {
+                box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-autocomplete {
+        &.p-autocomplete-multiple {
+            .p-autocomplete-multiple-container {
+                @include filled-input-wrapper();
+            }
+        }
+    }
+}
+
+.p-float-label {
+    .p-autocomplete-multiple-container {
+        .p-autocomplete-token {
+            padding: .25rem 1rem;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-autocomplete {
+            .p-autocomplete-multiple-container {
+                .p-autocomplete-token {
+                    padding-top: 0;
+                    padding-bottom: 0;
+
+                    .p-autocomplete-token-icon {
+                        font-size: 75%;
+                    }
+                }
+
+                .p-autocomplete-input-token {
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .p-autocomplete.p-invalid {
+        > .p-inputtext {
+            @include invalid-filled-input();
+        }
+
+        > .p-autocomplete-multiple-container {
+            @include invalid-filled-input-wrapper();
+        }
+    }
+}
+
+.p-autocomplete.p-invalid {
+    > .p-inputtext {
+        &:enabled:focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+
+    > .p-autocomplete-multiple-container {
+        &:not(.p-disabled).p-focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_breadcrumb.scss b/themes/material/extensions/_breadcrumb.scss
new file mode 100644
index 0000000..0dc71d1
--- /dev/null
+++ b/themes/material/extensions/_breadcrumb.scss
@@ -0,0 +1,9 @@
+.p-breadcrumb {
+    .p-menuitem-link {
+        &:focus {
+            background: $emphasis-lower;
+        }
+
+        padding: 0.25rem 0.5rem;
+    }
+}
diff --git a/themes/material/extensions/_button.scss b/themes/material/extensions/_button.scss
new file mode 100644
index 0000000..1ebc4f1
--- /dev/null
+++ b/themes/material/extensions/_button.scss
@@ -0,0 +1,250 @@
+.p-button {
+    font-weight: 500;
+    min-width: 4rem;
+
+    &.p-button-icon-only {
+        min-width: auto;
+    }
+
+    @include button-states {
+        &:focus {
+            background: rgba($buttonBg, .76);
+        }
+
+        &:active {
+            background: rgba($buttonBg, .68);
+        }
+    }
+
+    .p-ink {
+        background-color: rgba(255,255,255, .32);
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($buttonBg, .12);
+            }
+
+            &:active {
+                background: rgba($buttonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($buttonBg, .16);
+        }
+    }
+
+    &.p-button-outlined {
+        box-shadow: inset 0 0 0 1px;
+
+        &:enabled:focus {
+            box-shadow: inset 0 0 0 1px;
+        }
+
+        &:enabled:active {
+            box-shadow: inset 0 0 0 1px;
+        }
+    }
+
+    &:disabled {
+        background-color: $emphasis-lower !important;
+        color: $emphasis-low !important;
+        opacity: 1;
+
+        &.p-button-text {
+            background-color: transparent !important;
+            color: $emphasis-low !important;
+        }
+
+        &.p-button-outlined {
+            background-color: transparent !important;
+            color: $emphasis-low !important;
+            border-color: $emphasis-low !important;
+        }
+    }
+
+    &.p-button-raised {
+        @include button-states {
+            &:focus {
+                box-shadow: $raisedButtonShadow;
+            }
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    @include button-states {
+        &:focus {
+            background: rgba($secondaryButtonBg, .76);
+        }
+
+        &:active {
+            background: rgba($secondaryButtonBg, .68);
+        }
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($secondaryButtonBg, .12);
+            }
+
+            &:active {
+                background: rgba($secondaryButtonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($secondaryButtonBg, .16);
+        }
+    }
+}
+
+.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    @include button-states {
+        &:focus {
+            background: rgba($infoButtonBg, .76);
+        }
+
+        &:active {
+            background: rgba($infoButtonBg, .68);
+        }
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($infoButtonBg, .12);
+            }
+
+            &:active {
+                background: rgba($infoButtonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($infoButtonBg, .16);
+        }
+    }
+}
+
+.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    @include button-states {
+        &:focus {
+            background: rgba($successButtonBg, .76);
+        }
+
+        &:active {
+            background: rgba($successButtonBg, .68);
+        }
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($successButtonBg, .12);
+            }
+
+            &:active {
+                background: rgba($successButtonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($successButtonBg, .16);
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    @include button-states {
+        &:focus {
+            background: rgba($warningButtonBg, .76);
+        }
+
+        &:active {
+            background: rgba($warningButtonBg, .68);
+        }
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($warningButtonBg, .12);
+            }
+
+            &:active {
+                background: rgba($warningButtonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($warningButtonBg, .16);
+        }
+    }
+}
+
+.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    @include button-states {
+        &:focus {
+            background: rgba($helpButtonBg, .76);
+        }
+
+        &:active {
+            background: rgba($helpButtonBg, .68);
+        }
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($helpButtonBg, .12);
+            }
+
+            &:active {
+                background: rgba($helpButtonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($helpButtonBg, .16);
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    @include button-states {
+        &:focus {
+            background: rgba($dangerButtonBg, .76);
+        }
+
+        &:active {
+            background: rgba($dangerButtonBg, .68);
+        }
+    }
+
+    &.p-button-text,
+    &.p-button-outlined {
+        @include button-states {
+            &:focus {
+                background: rgba($dangerButtonBg, .12);
+            }
+
+            &:active {
+                background: rgba($dangerButtonBg, .16);
+            }
+        }
+
+        .p-ink {
+            background-color: rgba($dangerButtonBg, .16);
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_calendar.scss b/themes/material/extensions/_calendar.scss
new file mode 100644
index 0000000..5cbc583
--- /dev/null
+++ b/themes/material/extensions/_calendar.scss
@@ -0,0 +1,137 @@
+.p-calendar-w-btn {
+    border: $inputBorder;
+    background: $inputBg;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    .p-inputtext {
+        background-image: none;
+        background-color: transparent;
+        border: 0 none;
+
+        &:enabled:focus {
+            box-shadow: none;
+        }
+    }
+
+    .p-datepicker-trigger.p-button {
+        background-color: transparent;
+        border: 0 none;
+    
+        span {
+            color: $inputIconColor;
+        }
+
+        &:enabled:hover {
+            background: rgba($overlayColor, .04);
+        }
+
+        &:enabled:active,
+        &:focus {
+            background: rgba($overlayColor, .12);
+        }
+
+        &:disabled {
+            background-color: transparent !important;
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-inputwrapper-focus {
+        border-color: $inputFocusBorderColor;
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+    }
+}
+
+.p-datepicker {
+    .p-datepicker-header {
+        border-bottom: 0 none;
+
+        .p-datepicker-title {
+            margin: 0 auto 0 0;
+            order: 1;
+        }
+    
+        .p-datepicker-prev {
+            order: 2;
+        }
+    
+        .p-datepicker-next {
+            order: 3;
+        }
+    }
+
+    table {
+        th {
+            border-bottom: $calendarHeaderBorder;
+            color: $emphasis-low();
+            font-weight: 400;
+            font-size: .875rem;
+        }
+       
+       
+        td {
+            &.p-datepicker-today {
+                > span {
+                    box-shadow: 0 0 0 1px rgba($overlayColor,.38);
+                }
+
+                &.p-highlight {
+                    box-shadow: 0 0 0 1px $highlightBg;
+                }
+            }
+        }
+    }
+}
+
+.p-calendar.p-invalid {
+    .p-inputtext {
+        &:enabled:focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+
+    &.p-calendar-w-btn {
+        border-color: $inputErrorBorderColor;
+
+        .p-inputtext {
+            &:enabled:focus {
+                box-shadow: none;
+            }
+        }
+
+        &:not(.p-disabled).p-inputwrapper-focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-calendar-w-btn {
+        @include filled-input-wrapper();
+
+        .p-inputtext {
+            border: 0 none;
+        }
+    }
+
+    .p-calendar.p-invalid {
+        .p-inputtext {
+            @include invalid-filled-input();
+        }
+
+        &.p-calendar-w-btn {
+            @include invalid-filled-input-wrapper();
+
+            .p-inputtext,
+            .p-inputtext:enabled:hover,
+            .p-inputtext:enabled:focus {
+                border: 0 none;
+                background-image: none;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_carousel.scss b/themes/material/extensions/_carousel.scss
new file mode 100644
index 0000000..bd0e368
--- /dev/null
+++ b/themes/material/extensions/_carousel.scss
@@ -0,0 +1,13 @@
+.p-carousel {
+    .p-carousel-indicators {
+
+        .p-carousel-indicator {
+            &.p-highlight {
+                button {
+                    background: $accentColor;
+                    color: $accentTextColor;
+                }
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_cascadeselect.scss b/themes/material/extensions/_cascadeselect.scss
new file mode 100644
index 0000000..afd2d3e
--- /dev/null
+++ b/themes/material/extensions/_cascadeselect.scss
@@ -0,0 +1,59 @@
+.p-cascadeselect {
+    .p-cascadeselect-label, .p-dropdown-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-cascadeselect-label {
+        border: 0 none;
+    }
+
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+    }
+}
+
+.p-cascadeselect-item-content {
+    .p-ink {
+        background-color: rgba($primaryColor, .16);
+    }
+}
+
+.p-input-filled {
+    .p-cascadeselect {
+        @include filled-input-wrapper();
+
+        .p-cascadeselect-label {
+            &:hover {
+                background-image: none;
+                background: transparent;
+            }
+        }
+    }
+
+    .p-float-label {
+        .p-cascadeselect {
+            .p-cascadeselect-label {
+                @include filled-input-float-label();
+            }
+        }
+        
+        .p-inputwrapper-filled {
+            &.p-cascadeselect {
+                .p-cascadeselect-label {
+                    @include filled-input-float-label();
+                }
+            }
+        }
+    }
+
+    .p-cascadeselect.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-cascadeselect.p-invalid {
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_checkbox.scss b/themes/material/extensions/_checkbox.scss
new file mode 100644
index 0000000..095e88b
--- /dev/null
+++ b/themes/material/extensions/_checkbox.scss
@@ -0,0 +1,86 @@
+.p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow $transitionDuration;
+
+    .p-checkbox-box {
+        border-color: nth($checkboxBorder, 3);
+        border-radius: 2px;
+        position: relative;
+
+        &:not(.p-disabled):hover {
+            border-color: nth($checkboxBorder, 3);
+        }
+
+        &:not(.p-disabled).p-focus {
+            border-color: nth($checkboxBorder, 3);
+        }
+
+        &.p-highlight {
+            &:not(.p-disabled).p-focus {
+                border-color: $checkboxActiveBorderColor;
+            }
+
+            .p-checkbox-icon.pi-check:before {
+                content: "";
+                position: absolute;
+                top: 6px;
+                left: 1px;
+                border-right: 2px solid transparent;
+                border-bottom: 2px solid transparent;
+                transform: rotate(45deg);
+                transform-origin: 0% 100%;
+                animation: checkbox-check 125ms 50ms linear forwards;
+            }
+        }
+    }
+
+    &:not(.p-checkbox-disabled):hover {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
+    }
+
+    &:not(.p-checkbox-disabled).p-checkbox-focused {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
+    }
+
+    &.p-checkbox-checked {
+        &:not(.p-checkbox-disabled):hover {
+            box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .04);
+        }
+    
+        &:not(.p-checkbox-disabled).p-checkbox-focused {
+            box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .12);
+        }
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputBg;
+            }
+        }
+    }
+}
+
+@keyframes checkbox-check{
+    0%{
+      width: 0;
+      height: 0;
+      border-color: $checkboxIconActiveColor;
+      transform: translate3d(0,0,0) rotate(45deg);
+    }
+    33%{
+      width: 4px;
+      height: 0;
+      transform: translate3d(0,0,0) rotate(45deg);
+    }
+    100%{    
+      width: 4px;
+      height: 10px;    
+      border-color: $checkboxIconActiveColor;
+      transform: translate3d(0,-10px,0) rotate(45deg);
+    }
+  }
\ No newline at end of file
diff --git a/themes/material/extensions/_chips.scss b/themes/material/extensions/_chips.scss
new file mode 100644
index 0000000..7fd9927
--- /dev/null
+++ b/themes/material/extensions/_chips.scss
@@ -0,0 +1,54 @@
+.p-chips {
+    .p-chips-multiple-container {
+        &:not(.p-disabled).p-focus {
+            box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-chips-multiple-container {
+        @include filled-input-wrapper();
+    }
+}
+
+.p-float-label {
+    .p-chips-multiple-container {
+        .p-chips-token {
+            padding: .25rem 1rem;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-chips {
+            .p-chips-multiple-container {
+                .p-chips-token {
+                    padding-top: 0;
+                    padding-bottom: 0;
+
+                    .p-chips-token-icon {
+                        font-size: 75%;
+                    }
+                }
+
+                .p-chips-input-token {
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .p-chips.p-invalid {
+        .p-chips-multiple-container {
+            @include invalid-filled-input-wrapper();
+        }
+    }
+}
+
+.p-chips.p-invalid .p-chips-multiple-container {
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_datatable.scss b/themes/material/extensions/_datatable.scss
new file mode 100644
index 0000000..4c08aa4
--- /dev/null
+++ b/themes/material/extensions/_datatable.scss
@@ -0,0 +1,33 @@
+.p-datatable {
+    .p-sortable-column {
+        outline: 0 none;
+
+        &:focus {
+            background-color: rgba($overlayColor, 0.03);
+        }
+    }
+
+    .p-datatable-tbody {
+        > tr {
+            outline: 0 none;
+
+            &:not(.p-highlight):focus {
+                background-color: rgba($overlayColor, 0.03);                
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_dropdown.scss b/themes/material/extensions/_dropdown.scss
new file mode 100644
index 0000000..7069628
--- /dev/null
+++ b/themes/material/extensions/_dropdown.scss
@@ -0,0 +1,40 @@
+.p-dropdown {
+    .p-inputtext, .p-dropdown-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-inputtext {
+        border: 0 none;
+    }
+
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+    }
+}
+
+.p-dropdown-item {
+    .p-ink {
+        background-color: rgba($primaryColor, .16);
+    }
+}
+
+.p-input-filled {
+    .p-dropdown {
+        @include filled-input-wrapper();
+
+        .p-inputtext {
+            border: 0 none;
+        }
+    }
+
+    .p-dropdown.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-dropdown.p-invalid {
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_fieldset.scss b/themes/material/extensions/_fieldset.scss
new file mode 100644
index 0000000..7657627
--- /dev/null
+++ b/themes/material/extensions/_fieldset.scss
@@ -0,0 +1,15 @@
+.p-fieldset {
+    .p-fieldset-legend {
+        border: 0 none;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            a {
+                &:focus {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_float_label.scss b/themes/material/extensions/_float_label.scss
new file mode 100644
index 0000000..c5a032b
--- /dev/null
+++ b/themes/material/extensions/_float_label.scss
@@ -0,0 +1,40 @@
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+    top: -.5rem !important;
+    background-color: $inputBg;
+    padding: 2px 4px;
+    margin-left: -4px;
+    margin-top: 0;
+}
+
+.p-float-label textarea ~ label {
+    margin-top: 0;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label .p-inputwrapper-focus ~ label {
+    color: $inputFocusBorderColor;
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-inputtext {
+            @include filled-input-float-label();
+        }
+    
+        input:focus ~ label,
+        input.p-filled ~ label,
+        textarea:focus ~ label,
+        textarea.p-filled ~ label,
+        .p-inputwrapper-focus ~ label,
+        .p-inputwrapper-filled ~ label {
+            top: .25rem !important;
+            margin-top: 0;
+            background: transparent;
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_fullcalendar.scss b/themes/material/extensions/_fullcalendar.scss
new file mode 100644
index 0000000..6e897ec
--- /dev/null
+++ b/themes/material/extensions/_fullcalendar.scss
@@ -0,0 +1,84 @@
+.fc {
+    /* FullCalendar 4 */
+    &.fc-unthemed {
+
+        .fc-toolbar {
+            .fc-button {
+                &:focus {
+                    background: rgba($buttonBg, .76);
+                }
+
+                &:active {
+                    background: rgba($buttonBg, .68);
+                }
+            }
+
+            .fc-button-group {
+                .fc-button {
+                    &:focus {
+                        background: rgba($buttonBg, .76);
+                    }
+
+                    &:active {
+                        background: rgba($buttonBg, .68);
+                    }
+
+                    &.fc-dayGridMonth-button,
+                    &.fc-timeGridWeek-button,
+                    &.fc-timeGridDay-button {
+                        &:focus {
+                            background: $toggleButtonActiveBg;
+                            border-color: $toggleButtonActiveBorderColor;
+
+                            &.p-highlight {
+                                background: $toggleButtonActiveHoverBg;
+                                border-color: $toggleButtonActiveHoverBorderColor;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    /* FullCalendar 5 */
+    &.fc-theme-standard {
+        .fc-toolbar {
+            .fc-button {
+                &:focus {
+                    background: rgba($buttonBg, .76);
+                }
+
+                &:active {
+                    background: rgba($buttonBg, .68);
+                }
+            }
+
+            .fc-button-group {
+                .fc-button {
+                    &:focus {
+                        background: rgba($buttonBg, .76);
+                    }
+
+                    &:active {
+                        background: rgba($buttonBg, .68);
+                    }
+
+                    &.fc-dayGridMonth-button,
+                    &.fc-timeGridWeek-button,
+                    &.fc-timeGridDay-button {
+                        &:focus {
+                            background: $toggleButtonActiveBg;
+                            border-color: $toggleButtonActiveBorderColor;
+
+                            &.p-highlight {
+                                background: $toggleButtonActiveHoverBg;
+                                border-color: $toggleButtonActiveHoverBorderColor;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_galleria.scss b/themes/material/extensions/_galleria.scss
new file mode 100644
index 0000000..8fe0c77
--- /dev/null
+++ b/themes/material/extensions/_galleria.scss
@@ -0,0 +1,27 @@
+.p-galleria {
+    .p-galleria-indicators {
+        padding: $galleriaIndicatorsPadding;
+
+        .p-galleria-indicator {
+            &.p-highlight {
+                button {
+                    background: $accentColor;
+                    color: $accentTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            .p-galleria-indicator {
+                &.p-highlight {
+                    button {
+                        background: rgba($accentColor, .68);
+                        color: $accentTextColor;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_input.scss b/themes/material/extensions/_input.scss
new file mode 100644
index 0000000..865b149
--- /dev/null
+++ b/themes/material/extensions/_input.scss
@@ -0,0 +1,15 @@
+.p-inputtext {
+    &:enabled:focus {
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+
+        &.p-invalid {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-inputtext {
+        @include filled-input();
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_inputgroup.scss b/themes/material/extensions/_inputgroup.scss
new file mode 100644
index 0000000..fc30937
--- /dev/null
+++ b/themes/material/extensions/_inputgroup.scss
@@ -0,0 +1,36 @@
+.p-input-filled {
+    .p-inputgroup {
+        .p-inputgroup-addon {
+            @include filled-input-default();
+
+            &:last-child {
+                border-right-color: transparent;
+            }
+        }
+    }
+
+    .p-inputgroup-addon:first-child,
+    .p-inputgroup button:first-child,
+    .p-inputgroup input:first-child,
+    .p-inputgroup > .p-inputwrapper:first-child,
+    .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+        border-bottom-left-radius: 0;
+    }
+
+    .p-inputgroup .p-float-label:first-child input {
+        border-bottom-left-radius: 0;
+    }
+
+    .p-inputgroup-addon:last-child,
+    .p-inputgroup button:last-child,
+    .p-inputgroup input:last-child,
+    .p-inputgroup > .p-inputwrapper:last-child,
+    .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+        border-bottom-right-radius: 0;
+    }
+
+    .p-inputgroup .p-float-label:last-child input {
+        border-bottom-right-radius: 0;
+    }
+}
+
diff --git a/themes/material/extensions/_inputnumber.scss b/themes/material/extensions/_inputnumber.scss
new file mode 100644
index 0000000..2fb73ad
--- /dev/null
+++ b/themes/material/extensions/_inputnumber.scss
@@ -0,0 +1,15 @@
+.p-inputnumber.p-invalid {
+    .p-inputtext {
+        &:enabled:focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-inputnumber.p-invalid {
+        .p-inputtext {
+            @include invalid-filled-input();
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_inputswitch.scss b/themes/material/extensions/_inputswitch.scss
new file mode 100644
index 0000000..e4e6fae
--- /dev/null
+++ b/themes/material/extensions/_inputswitch.scss
@@ -0,0 +1,32 @@
+.p-inputswitch {
+    .p-inputswitch-slider:before {
+        transition-property: box-shadow transform;
+        box-shadow: 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider:before {
+            box-shadow: 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12), 0 0 1px 10px rgba($overlayColor, .04), 
+        }
+    }
+
+    &.p-inputswitch-focus,
+    &.p-inputswitch-focus:not(.p-disabled):hover  {
+        .p-inputswitch-slider:before {
+            box-shadow: 0 0 1px 10px rgba($overlayColor, .12), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+        }
+    }
+
+    &.p-inputswitch-checked:not(.p-disabled):hover {
+        .p-inputswitch-slider:before {
+            box-shadow: 0 0 1px 10px rgba($inputSwitchHandleOnBg, .04), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+        }
+    }
+
+    &.p-inputswitch-checked.p-inputswitch-focus,
+    &.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover {
+        .p-inputswitch-slider:before {
+            box-shadow: 0 0 1px 10px rgba($inputSwitchHandleOnBg, .12), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_listbox.scss b/themes/material/extensions/_listbox.scss
new file mode 100644
index 0000000..d3446f3
--- /dev/null
+++ b/themes/material/extensions/_listbox.scss
@@ -0,0 +1,17 @@
+.p-listbox {
+    .p-listbox-list {
+        .p-listbox-item {
+            .p-ink {
+                background-color: rgba($primaryColor, .16);
+            }
+
+            &:focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_megamenu.scss b/themes/material/extensions/_megamenu.scss
new file mode 100644
index 0000000..f7c22b4
--- /dev/null
+++ b/themes/material/extensions/_megamenu.scss
@@ -0,0 +1,9 @@
+.p-megamenu {
+    .p-menuitem {
+        .p-menuitem-link {
+            &:focus {
+                background: $emphasis-lower;
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_menu.scss b/themes/material/extensions/_menu.scss
new file mode 100644
index 0000000..4422cd4
--- /dev/null
+++ b/themes/material/extensions/_menu.scss
@@ -0,0 +1,9 @@
+.p-menu {
+    .p-menuitem {
+        .p-menuitem-link {
+            &:focus {
+                background: $emphasis-lower;
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_menubar.scss b/themes/material/extensions/_menubar.scss
new file mode 100644
index 0000000..5e76ccc
--- /dev/null
+++ b/themes/material/extensions/_menubar.scss
@@ -0,0 +1,9 @@
+.p-menubar {
+    .p-menuitem {
+        .p-menuitem-link {
+            &:focus {
+                background: $emphasis-lower;
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_mixins.scss b/themes/material/extensions/_mixins.scss
new file mode 100644
index 0000000..980c0e1
--- /dev/null
+++ b/themes/material/extensions/_mixins.scss
@@ -0,0 +1,114 @@
+@mixin filled-input() {
+    @include filled-input-default();
+    @include filled-input-interaction();
+}
+
+@mixin filled-input-wrapper() {
+    @include filled-input-wrapper-default();
+    @include filled-input-wrapper-interaction();
+}
+
+@mixin filled-input-default() {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: $inputFilledBg no-repeat;
+    background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, nth($inputBorder, 3), nth($inputBorder, 3));
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+}
+
+@mixin invalid-filled-input() {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+
+    &:enabled:hover {
+        border-color: transparent;
+        background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+    }
+
+    &:enabled:focus {
+        box-shadow: none;
+        border-color: transparent;
+    }
+}
+    
+@mixin filled-input-interaction() {
+    &:enabled:hover {
+        background-color: $inputFilledHoverBg;
+        border-color: transparent;
+        background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $inputHoverBorderColor, $inputHoverBorderColor);
+    }
+
+    &:enabled:focus {
+        box-shadow: none;
+        background-color: $inputFilledFocusBg;
+        border-color: transparent;
+        background-size: 100% 2px, 100% 1px;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-filled-input();
+     }
+}
+
+@mixin filled-input-wrapper-default() {
+    @include filled-input-default();
+
+    .p-inputtext {
+        background-image: none;
+        background: transparent;
+    }
+}
+
+@mixin invalid-filled-input-wrapper() {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+
+    &:not(.p-disabled):hover {
+        background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+    }
+
+    &:not(.p-disabled).p-focus,
+    &:not(.p-disabled).p-inputwrapper-focus {
+        box-shadow: none;
+        background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
+    }
+}
+    
+
+@mixin filled-input-wrapper-interaction() {
+    &:not(.p-disabled):hover {
+        background-color: $inputFilledHoverBg;
+        border-color: transparent;
+        background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $emphasis-high, $emphasis-high);
+    }
+
+    &:not(.p-disabled).p-focus,
+    &:not(.p-disabled).p-inputwrapper-focus {
+        box-shadow: none;
+        background-color: $inputFilledFocusBg;
+        border-color: transparent;
+        background-size: 100% 2px, 100% 1px;
+    }
+
+    .p-inputtext {
+        &:enabled:hover,
+        &:enabled:focus {
+            background-image: none;
+            background: transparent;
+        }
+    } 
+}
+
+@mixin filled-input-float-label() {
+    @if (nth($inputPadding, 1) == 1rem) {
+        padding-top: 1.5rem;
+        padding-bottom: .5rem;
+    }
+    @else if (nth($inputPadding, 1) == .75rem) {
+        padding-top: 1.25rem;
+        padding-bottom: .25rem;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_multiselect.scss b/themes/material/extensions/_multiselect.scss
new file mode 100644
index 0000000..d6da153
--- /dev/null
+++ b/themes/material/extensions/_multiselect.scss
@@ -0,0 +1,104 @@
+.p-multiselect {
+    .p-multiselect-label, .p-multiselect-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-multiselect-label {
+        border: 0 none;
+    }
+
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+    }
+}
+
+.p-multiselect-panel {
+    .p-multiselect-items {
+        .p-multiselect-item {
+            .p-ink {
+                background-color: rgba($primaryColor, .16);
+            }
+    
+            &:focus {
+                background: $emphasis-lower;
+    
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+
+    .p-multiselect-header {
+        .p-multiselect-close {
+            &:focus {
+                background: $emphasis-lower;
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-multiselect {
+        @include filled-input-wrapper();
+
+        .p-multiselect-label {
+            &:hover {
+                background-image: none;
+                background: transparent;
+            }
+        }
+    }
+}
+
+.p-float-label {
+    .p-multiselect-label {
+        .p-multiselect-token {
+            padding: .25rem 1rem;
+            margin-top: .25rem;
+            margin-bottom: .25rem;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-multiselect {
+            .p-multiselect-label {
+                @include filled-input-float-label();
+            }
+        }
+        
+        .p-inputwrapper-filled {
+            &.p-multiselect {
+                .p-multiselect-label {
+                    @include filled-input-float-label();
+                }
+                
+                &.p-multiselect-chip {
+                    .p-multiselect-token {
+                        padding-top: 0;
+                        padding-bottom: 0;
+                        margin-top: 0;
+                        margin-bottom: 0;
+    
+                        .p-multiselect-token-icon {
+                            font-size: 75%;
+                        }
+                    }
+                }   
+            }
+        }
+    }
+
+    .p-multiselect.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-multiselect.p-invalid {
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_orderlist.scss b/themes/material/extensions/_orderlist.scss
new file mode 100644
index 0000000..cc1923c
--- /dev/null
+++ b/themes/material/extensions/_orderlist.scss
@@ -0,0 +1,13 @@
+.p-orderlist {
+    .p-orderlist-list {
+        .p-orderlist-item {
+            &:focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_overlaypanel.scss b/themes/material/extensions/_overlaypanel.scss
new file mode 100644
index 0000000..994b9e6
--- /dev/null
+++ b/themes/material/extensions/_overlaypanel.scss
@@ -0,0 +1,5 @@
+.p-overlaypanel {
+    .p-overlaypanel-content {
+        padding: 1.5rem;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_paginator.scss b/themes/material/extensions/_paginator.scss
new file mode 100644
index 0000000..f7ed4c8
--- /dev/null
+++ b/themes/material/extensions/_paginator.scss
@@ -0,0 +1,13 @@
+.p-paginator {
+    justify-content: flex-end;
+
+    .p-paginator-element {
+        &:focus {
+            background: $emphasis-lower;
+
+            &.p-highlight {
+                background: rgba($primaryColor, .24);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_panel.scss b/themes/material/extensions/_panel.scss
new file mode 100644
index 0000000..9e84f13
--- /dev/null
+++ b/themes/material/extensions/_panel.scss
@@ -0,0 +1,24 @@
+.p-panel {
+    border-radius: $borderRadius;
+    box-shadow: $cardShadow;
+
+    .p-panel-header,
+    .p-panel-content,
+    .p-panel-footer {
+        border: 0 none;
+    }
+
+    .p-panel-content {
+        padding-top: 0;
+    }
+
+    .p-panel-title {
+        font-size: 1.25rem;
+    }
+
+    .p-panel-header-icon {
+        &:focus {
+            background: $emphasis-lower;
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_panelmenu.scss b/themes/material/extensions/_panelmenu.scss
new file mode 100644
index 0000000..4a84d88
--- /dev/null
+++ b/themes/material/extensions/_panelmenu.scss
@@ -0,0 +1,49 @@
+.p-panelmenu {
+    .p-panelmenu-panel {
+        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+        margin-bottom: 0;
+        border-radius: 0;
+        position: relative;
+        transition: margin-bottom 225ms;
+
+        &:first-child {
+            border-top-left-radius: $borderRadius;
+            border-top-right-radius: $borderRadius;
+        }
+
+        &:last-child {
+            border-bottom-left-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+
+        .p-panelmenu-header {
+            .p-panelmenu-icon {
+                order: 1;
+                margin-left: auto;
+                margin-right: 0;
+            }
+
+            &.p-disabled {
+                opacity: 1;
+    
+                .p-panelmenu-header-link > *{
+                    opacity: $disabledOpacity;
+                }
+            }
+
+            .p-panelmenu-header-link {
+                &:focus {
+                    background: $accordionHeaderHoverBg;
+                }
+            }
+        }
+
+        .p-menuitem {
+            .p-menuitem-link {
+                &:focus {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_password.scss b/themes/material/extensions/_password.scss
new file mode 100644
index 0000000..81d6902
--- /dev/null
+++ b/themes/material/extensions/_password.scss
@@ -0,0 +1,15 @@
+.p-input-filled {
+    .p-password.p-invalid {
+        > .p-inputtext {
+            @include invalid-filled-input();
+        }
+    }
+}
+
+.p-password.p-invalid {
+    > .p-inputtext {
+        &:enabled:focus {
+            box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_picklist.scss b/themes/material/extensions/_picklist.scss
new file mode 100644
index 0000000..62ddfaf
--- /dev/null
+++ b/themes/material/extensions/_picklist.scss
@@ -0,0 +1,13 @@
+.p-picklist {
+    .p-picklist-list {
+        .p-picklist-item {
+            &:focus {
+                background: $emphasis-lower;
+
+                &.p-highlight {
+                    background: rgba($primaryColor, .24);
+                }
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_progressbar.scss b/themes/material/extensions/_progressbar.scss
new file mode 100644
index 0000000..a5837cc
--- /dev/null
+++ b/themes/material/extensions/_progressbar.scss
@@ -0,0 +1,7 @@
+.p-progressbar {
+    border-radius: 0;
+
+    .p-progressbar-label {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_radiobutton.scss b/themes/material/extensions/_radiobutton.scss
new file mode 100644
index 0000000..592cb34
--- /dev/null
+++ b/themes/material/extensions/_radiobutton.scss
@@ -0,0 +1,50 @@
+.p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow $transitionDuration;
+
+    .p-radiobutton-box {
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border: $radiobuttonBorder;
+        }
+
+        &:not(.p-disabled).p-focus {
+            border: $radiobuttonBorder;
+        }
+
+        &.p-highlight {
+            &:not(.p-disabled).p-focus {
+                border-color: $radiobuttonActiveBorderColor;
+            }
+        }
+    }
+
+    &:not(.p-radiobutton-disabled):hover {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
+    }
+
+    &:not(.p-radiobutton-disabled).p-radiobutton-focused {
+        box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
+    }
+
+    &.p-radiobutton-checked {
+        &:not(.p-radiobutton-disabled):hover {
+            box-shadow: 0 0 1px 10px rgba($radiobuttonActiveBorderColor, .04);
+        }
+    
+        &:not(.p-radiobutton-disabled).p-radiobutton-focused {
+            box-shadow: 0 0 1px 10px rgba($radiobuttonActiveBorderColor, .12);
+        }
+    }
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputBg;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_rating.scss b/themes/material/extensions/_rating.scss
new file mode 100644
index 0000000..d1ea85e
--- /dev/null
+++ b/themes/material/extensions/_rating.scss
@@ -0,0 +1,30 @@
+.p-rating {
+    gap: 0;
+
+    .p-rating-item {
+        border-radius: 50%;
+        width: 2rem;
+        height: 2rem;
+        justify-content: center;
+
+        &:focus {
+            background: rgba($primaryColor, .12);
+
+            &.p-rating-cancel-item {
+                background: rgba($ratingCancelIconColor, .12);
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                background-color: rgba(0,0,0,.04);
+
+                &.p-rating-cancel-item {
+                    background: rgba($ratingCancelIconColor, .04);
+                }
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_selectbutton.scss b/themes/material/extensions/_selectbutton.scss
new file mode 100644
index 0000000..7f2b360
--- /dev/null
+++ b/themes/material/extensions/_selectbutton.scss
@@ -0,0 +1,13 @@
+.p-selectbutton {
+    .p-button {
+        &:focus {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+    
+            &.p-highlight {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_slidemenu.scss b/themes/material/extensions/_slidemenu.scss
new file mode 100644
index 0000000..5f907c9
--- /dev/null
+++ b/themes/material/extensions/_slidemenu.scss
@@ -0,0 +1,7 @@
+.p-slidemenu {
+    .p-menuitem-link {
+        &:focus {
+            background: $emphasis-lower;
+        }
+    }
+}
diff --git a/themes/material/extensions/_slider.scss b/themes/material/extensions/_slider.scss
new file mode 100644
index 0000000..bc94aad
--- /dev/null
+++ b/themes/material/extensions/_slider.scss
@@ -0,0 +1,16 @@
+.p-slider {
+    .p-slider-handle {
+        transition: transform $transitionDuration, box-shadow $transitionDuration;
+        transform: scale(.7);
+
+        &:focus {
+            box-shadow: 0 0 1px 10px rgba($accentColor, .2);
+        }
+    }
+
+    &.p-slider-sliding {
+        .p-slider-handle {
+            transform: scale(1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_splitbutton.scss b/themes/material/extensions/_splitbutton.scss
new file mode 100644
index 0000000..faff010
--- /dev/null
+++ b/themes/material/extensions/_splitbutton.scss
@@ -0,0 +1,164 @@
+.p-splitbutton {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($buttonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($buttonBg, .16);
+                }
+            }
+        }
+    }
+
+    &.p-button-outlined {
+        > .p-button {
+            box-shadow: inset 0 0 0 1px;
+
+            &:enabled:focus {
+                box-shadow: inset 0 0 0 1px;
+            }
+
+            &:enabled:active {
+                box-shadow: inset 0 0 0 1px;
+            }
+
+            &.p-splitbutton-menubutton {
+                margin-left: -1px;
+                width: calc(#{$buttonIconOnlyWidth} + 1px);
+            }
+        }
+    }
+
+    &.p-disabled {
+        &.p-button-text {
+            > .p-button {
+                background-color: transparent !important;
+                color: $emphasis-low !important;
+            }
+        }
+
+        &.p-button-outlined {
+            > .p-button {
+                background-color: transparent !important;
+                color: $emphasis-low !important;
+                border-color: $emphasis-low !important;
+            }
+        }
+    }
+
+    &.p-button-raised {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    box-shadow: $raisedButtonShadow;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-secondary {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($secondaryButtonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($secondaryButtonBg, .16);
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-info > .p-button {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($infoButtonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($infoButtonBg, .16);
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-success {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($successButtonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($successButtonBg, .16);
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-warning {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($warningButtonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($warningButtonBg, .16);
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-help {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($helpButtonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($helpButtonBg, .16);
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-danger {
+    &.p-button-text,
+    &.p-button-outlined {
+        > .p-button {
+            @include button-states {
+                &:focus {
+                    background: rgba($dangerButtonBg, .12);
+                }
+
+                &:active {
+                    background: rgba($dangerButtonBg, .16);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_steps.scss b/themes/material/extensions/_steps.scss
new file mode 100644
index 0000000..42fb457
--- /dev/null
+++ b/themes/material/extensions/_steps.scss
@@ -0,0 +1,65 @@
+.p-steps {
+    padding: 1rem 0;
+
+    .p-steps-item {
+        justify-content: flex-start;
+        flex-direction: row-reverse;
+        align-items: center;
+
+        &:before {
+            position: static;
+            left: auto;
+            top: auto;
+            margin-top: 0;
+        }
+
+        &:last-child {
+            flex-grow: 0;
+
+            &:before {
+                display: none;
+            }
+        }
+
+        .p-menuitem-link {
+            flex-direction: row;
+            flex: 1 1 auto;
+            overflow: visible;
+            padding: 1rem $inlineSpacing;
+
+            .p-steps-number {
+                background-color: #9e9d9e;
+                color: #ffffff;
+                font-size: 0.857rem;
+                min-width: 1.714rem;
+                height: 1.714rem;
+                line-height: 1.714rem;
+            }
+
+            .p-steps-title {
+                margin: 0;
+                padding-left: $inlineSpacing;
+            }
+
+            &:not(.p-disabled):focus {
+                background: $emphasis-lower;
+            }
+        }
+
+        &.p-highlight {
+            .p-steps-number {
+                background-color: $primaryColor;
+                color: $primaryTextColor;
+            }
+
+            .p-steps-title {
+                font-weight: 600;
+                color: $textColor;
+            }
+        }
+
+        &.p-disabled {
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_tabmenu.scss b/themes/material/extensions/_tabmenu.scss
new file mode 100644
index 0000000..3771383
--- /dev/null
+++ b/themes/material/extensions/_tabmenu.scss
@@ -0,0 +1,37 @@
+.p-tabmenu {
+    .p-tabmenu-nav {
+        position: relative;
+
+        li {
+            .p-menuitem-link {
+                transition: background-color $transitionDuration;
+                border-radius: 0;
+                
+                > .p-ink {
+                    background-color: rgba($primaryColor, .16);
+                }
+
+                &:focus {
+                    background-color: rgba($primaryColor, .12);
+                }
+            }
+
+            &.p-highlight {
+                .p-menuitem-link {
+                    &:focus {
+                        background-color: rgba($primaryColor, .12);
+                    }
+                }
+            }
+        }
+
+        .p-tabmenu-ink-bar {
+            display: block;
+            position: absolute;
+            bottom: 0;
+            height: 2px;
+            background-color: $primaryColor;
+            transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_tabview.scss b/themes/material/extensions/_tabview.scss
new file mode 100644
index 0000000..ccb58b5
--- /dev/null
+++ b/themes/material/extensions/_tabview.scss
@@ -0,0 +1,30 @@
+.p-tabview {
+    .p-tabview-nav {
+        position: relative;
+
+        li {
+            .p-tabview-nav-link {
+                transition: background-color $transitionDuration;
+                border-radius: 0;
+                
+                > .p-ink {
+                    background-color: rgba($primaryColor, .16);
+                }
+
+                &:focus {
+                    background-color: rgba($primaryColor, .12);
+                }
+            }
+        }
+
+        .p-tabview-ink-bar {
+            z-index: 1;
+            display: block;
+            position: absolute;
+            bottom: 0;
+            height: 2px;
+            background-color: $primaryColor;
+            transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_tieredmenu.scss b/themes/material/extensions/_tieredmenu.scss
new file mode 100644
index 0000000..8f8e48d
--- /dev/null
+++ b/themes/material/extensions/_tieredmenu.scss
@@ -0,0 +1,7 @@
+.p-tieredmenu {
+    .p-menuitem-link {
+        &:focus {
+            background: $emphasis-lower;
+        }
+    }
+}
diff --git a/themes/material/extensions/_togglebutton.scss b/themes/material/extensions/_togglebutton.scss
new file mode 100644
index 0000000..e1d1eed
--- /dev/null
+++ b/themes/material/extensions/_togglebutton.scss
@@ -0,0 +1,11 @@
+.p-togglebutton.p-button {
+    &:focus {
+        background: $toggleButtonActiveBg;
+        border-color: $toggleButtonActiveBorderColor;
+
+        &.p-highlight {
+            background: $toggleButtonActiveHoverBg;
+            border-color: $toggleButtonActiveHoverBorderColor;
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_toolbar.scss b/themes/material/extensions/_toolbar.scss
new file mode 100644
index 0000000..bec3b3f
--- /dev/null
+++ b/themes/material/extensions/_toolbar.scss
@@ -0,0 +1,3 @@
+.p-toolbar {
+    border: 0 none;
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_tooltip.scss b/themes/material/extensions/_tooltip.scss
new file mode 100644
index 0000000..e8e64bf
--- /dev/null
+++ b/themes/material/extensions/_tooltip.scss
@@ -0,0 +1,10 @@
+.p-tooltip {
+    .p-tooltip-text {
+        box-shadow: none;
+        font-size: .875rem;
+    }
+
+    .p-tooltip-arrow {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_tree.scss b/themes/material/extensions/_tree.scss
new file mode 100644
index 0000000..cfdc939
--- /dev/null
+++ b/themes/material/extensions/_tree.scss
@@ -0,0 +1,15 @@
+.p-tree {
+    .p-tree-container {
+        .p-treenode {
+            .p-treenode-content {
+                &:focus {
+                    background: $emphasis-lower;
+
+                    &.p-highlight {
+                        background: rgba($primaryColor, .24);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/themes/material/extensions/_treeselect.scss b/themes/material/extensions/_treeselect.scss
new file mode 100644
index 0000000..768abb0
--- /dev/null
+++ b/themes/material/extensions/_treeselect.scss
@@ -0,0 +1,84 @@
+.p-treeselect {
+    .p-treeselect-label, .p-treeselect-trigger {
+        background-image: none;
+        background: transparent;
+    }
+
+    .p-treeselect-label {
+        border: 0 none;
+    }
+
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
+    }
+}
+
+.p-treeselect-item {
+    .p-ink {
+        background-color: rgba($primaryColor, .16);
+    }
+}
+
+.p-input-filled {
+    .p-treeselect {
+        @include filled-input-wrapper();
+
+        .p-treeselect-label {
+            &:hover {
+                background-image: none;
+                background: transparent;
+            }
+        }
+    }
+}
+
+.p-float-label {
+    .p-treeselect-label {
+        .p-treeselect-token {
+            padding: .25rem 1rem;
+            margin-top: .25rem;
+            margin-bottom: .25rem;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-float-label {
+        .p-treeselect {
+            .p-treeselect-label {
+                @include filled-input-float-label();
+            }
+        }
+        
+        .p-inputwrapper-filled {
+            &.p-treeselect {
+                .p-treeselect-label {
+                    @include filled-input-float-label();
+                }
+                
+                &.p-treeselect-chip {
+                    .p-treeselect-token {
+                        padding-top: 0;
+                        padding-bottom: 0;
+                        margin-top: 0;
+                        margin-bottom: 0;
+    
+                        .p-treeselect-token-icon {
+                            font-size: 75%;
+                        }
+                    }
+                }   
+            }
+        }
+    }
+
+    .p-treeselect.p-invalid {
+        @include invalid-filled-input-wrapper();
+    }
+}
+
+.p-treeselect.p-invalid {
+    &:not(.p-disabled).p-focus {
+        box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_treetable.scss b/themes/material/extensions/_treetable.scss
new file mode 100644
index 0000000..07fabe7
--- /dev/null
+++ b/themes/material/extensions/_treetable.scss
@@ -0,0 +1,19 @@
+.p-treetable {
+    .p-sortable-column {
+        outline: 0 none;
+
+        &:focus {
+            background-color: rgba($overlayColor, 0.03);
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            outline: 0 none;
+
+            &:not(.p-highlight):focus {
+                background-color: rgba($overlayColor, 0.03);                
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/material/extensions/_vendor_extensions.scss b/themes/material/extensions/_vendor_extensions.scss
new file mode 100644
index 0000000..55435cf
--- /dev/null
+++ b/themes/material/extensions/_vendor_extensions.scss
@@ -0,0 +1,49 @@
+@import './_mixins';
+@import './_accordion';
+@import './_autocomplete';
+@import './_breadcrumb';
+@import './_button';
+@import './_calendar';
+@import './_carousel';
+@import './_cascadeselect';
+@import './_checkbox';
+@import './_chips';
+@import './_datatable';
+@import './_dropdown';
+@import './_fullcalendar';
+@import './_galleria';
+@import './_input';
+@import './_inputgroup';
+@import './_inputnumber';
+@import './_inputswitch';
+@import './_fieldset';
+@import './_float_label';
+@import './_listbox';
+@import './_megamenu';
+@import './_menu';
+@import './_menubar';
+@import './_multiselect';
+@import './_overlaypanel';
+@import './_orderlist';
+@import './_paginator';
+@import './_password';
+@import './_panel';
+@import './_panelmenu';
+@import './_picklist';
+@import './_progressbar';
+@import './_radiobutton';
+@import './_rating';
+@import './_selectbutton';
+@import './_slidemenu';
+@import './_slider';
+@import './_splitbutton';
+@import './_steps';
+@import './_tabview';
+@import './_tieredmenu';
+@import './_toolbar';
+@import './_tooltip';
+@import './_tree';
+@import './_treeselect';
+@import './_treetable';
+@import './_tabmenu';
+@import './_togglebutton';
\ No newline at end of file
diff --git a/themes/material/material-dark/_variables.scss b/themes/material/material-dark/_variables.scss
new file mode 100644
index 0000000..6130254
--- /dev/null
+++ b/themes/material/material-dark/_variables.scss
@@ -0,0 +1,878 @@
+$colors: (
+    "blue": #2196F3,
+    "green": #689F38,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #4E5FBB,
+    "teal": #009688,
+    "orange": #FF9800,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #F44336,
+    "primary": $primaryColor
+) !default;
+
+$emphasis-high:rgba(255,255,255,.87) !default;
+$emphasis-medium:rgba(255,255,255,.60) !default;
+$emphasis-low:rgba(255,255,255,.38) !default;
+$emphasis-lower:rgba(255,255,255,.12) !default;
+$overlayColor:#ffffff !default;
+
+//global
+$fontFamily:Roboto,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$emphasis-high !default;
+$textSecondaryColor:$emphasis-medium !default;
+$borderRadius:4px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1) !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:none !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid hsla(0,0%,100%,.12) !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.38 !default;
+$maskBg:rgba(0, 0, 0, 0.32) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#f44435 !default;
+
+//selected state
+$highlightBg:rgba($primaryColor, .16) !default;
+$highlightTextColor:$primaryColor !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:transparent !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:none !default;
+
+//action icons
+$actionIconWidth:2.5rem !default;
+$actionIconHeight:2.5rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$textSecondaryColor !default;
+$actionIconHoverBg:rgba($overlayColor,.04) !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$textSecondaryColor !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:1rem 1rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:#1e1e1e !default;
+$inputTextColor:$emphasis-high !default;
+$inputIconColor:$emphasis-medium !default;
+$inputBorder:1px solid hsla(0,0%,100%,.3) !default;
+$inputHoverBorderColor:$emphasis-medium !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$emphasis-medium !default;
+$inputFilledBg:hsla(0,0%,100%,.06) !default;
+$inputFilledHoverBg:hsla(0,0%,100%,.08) !default;
+$inputFilledFocusBg:hsla(0,0%,100%,.1) !default;
+
+//input groups
+$inputGroupBg:$inputBg !default;
+$inputGroupTextColor:$emphasis-medium !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:#1e1e1e !default;
+$inputListTextColor:$textColor !default;
+$inputListBorder:1px solid hsla(0,0%,100%,.3) !default;
+$inputListPadding:0 !default;
+$inputListItemPadding:1rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$textColor !default;
+$inputListItemHoverBg:hsla(0,0%,100%,.04) !default;
+$inputListItemTextHoverColor:$textColor !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:none !default;
+$inputListHeaderPadding:1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:#1e1e1e !default;
+$inputListHeaderTextColor:$textColor !default;
+$inputListHeaderBorder:1px solid hsla(0,0%,100%,.12) !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:#2b2b2b !default;
+$inputOverlayHeaderBg:#2b2b2b !default;
+$inputOverlayBorder:0 none !default;
+$inputOverlayShadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:rgba($primaryColor, .32) !default;
+$passwordWeakBg:#EF9A9A !default;
+$passwordMediumBg:#FFF59D !default;
+$passwordStrongBg:#C5E1A5 !default;
+
+//button
+$buttonPadding:0.714rem 1rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:0.714rem !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:0 none !default;
+$buttonHoverBg:rgba($primaryColor, .92) !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:transparent !default;
+$buttonActiveBg:rgba($primaryColor, .68) !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:transparent !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:0 none !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:rgba(255,255,255,.04) !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:$accentColor !default;
+$secondaryButtonTextColor:$accentTextColor !default;
+$secondaryButtonBorder:0 none !default;
+$secondaryButtonHoverBg:rgba($accentColor, .92) !default;
+$secondaryButtonTextHoverColor:$accentTextColor !default;
+$secondaryButtonHoverBorderColor:transparent !default;
+$secondaryButtonActiveBg:rgba($accentColor, .68) !default;
+$secondaryButtonTextActiveColor:$accentTextColor !default;
+$secondaryButtonActiveBorderColor:transparent !default;
+$secondaryButtonFocusShadow:none !default;
+
+$infoButtonBg:#90CAF9 !default;
+$infoButtonTextColor:#212121 !default;
+$infoButtonBorder:0 none !default;
+$infoButtonHoverBg:rgba(#90CAF9, .92) !default;
+$infoButtonTextHoverColor:#212121 !default;
+$infoButtonHoverBorderColor:transparent !default;
+$infoButtonActiveBg:rgba(#90CAF9, .68) !default;
+$infoButtonTextActiveColor:#212121 !default;
+$infoButtonActiveBorderColor:transparent !default;
+$infoButtonFocusShadow:none !default;
+
+$successButtonBg:#C5E1A5 !default;
+$successButtonTextColor:#212121 !default;
+$successButtonBorder:0 none !default;
+$successButtonHoverBg:rgba(#C5E1A5, .92) !default;
+$successButtonTextHoverColor:#212121 !default;
+$successButtonHoverBorderColor:transparent !default;
+$successButtonActiveBg:rgba(#C5E1A5, .68) !default;
+$successButtonTextActiveColor:#212121 !default;
+$successButtonActiveBorderColor:transparent !default;
+$successButtonFocusShadow:none !default;
+
+$warningButtonBg:#FFF59D !default;
+$warningButtonTextColor:#212121 !default;
+$warningButtonBorder:0 none !default;
+$warningButtonHoverBg:rgba(#FFF59D, .92) !default;
+$warningButtonTextHoverColor:#212121 !default;
+$warningButtonHoverBorderColor:transparent !default;
+$warningButtonActiveBg:rgba(#FFF59D, .68) !default;
+$warningButtonTextActiveColor:#212121 !default;
+$warningButtonActiveBorderColor:transparent !default;
+$warningButtonFocusShadow:none !default;
+
+$helpButtonBg:#CE93D8 !default;
+$helpButtonTextColor:#212121 !default;
+$helpButtonBorder:0 none !default;
+$helpButtonHoverBg:rgba(#CE93D8, .92) !default;
+$helpButtonTextHoverColor:#212121 !default;
+$helpButtonHoverBorderColor:transparent !default;
+$helpButtonActiveBg:rgba(#CE93D8, .68) !default;
+$helpButtonTextActiveColor:#212121 !default;
+$helpButtonActiveBorderColor:transparent !default;
+$helpButtonFocusShadow:none !default;
+
+$dangerButtonBg:#EF9A9A !default;
+$dangerButtonTextColor:#212121 !default;
+$dangerButtonBorder:0 none !default;
+$dangerButtonHoverBg:rgba(#EF9A9A, .92) !default;
+$dangerButtonTextHoverColor:#212121 !default;
+$dangerButtonHoverBorderColor:transparent !default;
+$dangerButtonActiveBg:rgba(#EF9A9A, .68) !default;
+$dangerButtonTextActiveColor:#212121 !default;
+$dangerButtonActiveBorderColor:transparent !default;
+$dangerButtonFocusShadow:none !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:none !default;
+
+//checkbox
+$checkboxWidth:18px !default;
+$checkboxHeight:18px !default;
+$checkboxBorder:2px solid hsla(0,0%,100%,.7) !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid hsla(0,0%,100%,.7) !default;
+$radiobuttonIconSize:10px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryTextColor !default;
+$radiobuttonIconActiveColor:$primaryColor !default;
+$radiobuttonActiveHoverBg:$primaryTextColor !default;
+$radiobuttonIconActiveHoverColor:$primaryColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#2b2b2b !default;
+$colorPickerBorder:1px solid #1e1e1e !default;
+$colorPickerHandleColor:#ffffff !default;
+
+//togglebutton
+$toggleButtonBg:#2f2f2f !default;
+$toggleButtonBorder:1px solid rgba(255,255,255,.12) !default;
+$toggleButtonTextColor:$textColor !default;
+$toggleButtonIconColor:$textSecondaryColor !default;
+$toggleButtonHoverBg:#373737 !default;
+$toggleButtonHoverBorderColor:rgba(255,255,255,.12) !default;
+$toggleButtonTextHoverColor:$textColor !default;
+$toggleButtonIconHoverColor:$textSecondaryColor !default;
+$toggleButtonActiveBg:#1c1c1c !default;
+$toggleButtonActiveBorderColor:rgba(255,255,255,.12) !default;
+$toggleButtonTextActiveColor:$textColor !default;
+$toggleButtonIconActiveColor:$textSecondaryColor !default;
+$toggleButtonActiveHoverBg:#262626 !default;
+$toggleButtonActiveHoverBorderColor:rgba(255,255,255,.12) !default;
+$toggleButtonTextActiveHoverColor:$textColor !default;
+$toggleButtonIconActiveHoverColor:$textSecondaryColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:rgba(255,255,255,.04) !default;
+$inplaceTextHoverColor:$textColor !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#f44435 !default;
+$ratingCancelIconHoverColor:#f44435 !default;
+$ratingStarIconOffColor:$primaryColor !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:hsla(0,0%,100%,.3) !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:2px !default;
+$sliderVerticalWidth:2px !default;
+$sliderHandleWidth:20px !default;
+$sliderHandleHeight:20px !default;
+$sliderHandleBg:$primaryColor !default;
+$sliderHandleBorder:0 none !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:0 none !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$inputOverlayBg !default;
+$calendarInlineBg:#1e1e1e !default;
+$calendarTextColor:$textColor !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$inputOverlayHeaderBg !default;
+$calendarInlineHeaderBg:#1e1e1e !default;
+$calendarHeaderBorder:$divider !default;
+$calendarHeaderTextColor:$textColor !default;
+$calendarHeaderFontWeight:500 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:rgba(255,255,255,.04) !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:rgba(255,255,255,.5) !default;
+$calendarCellDateTodayTextColor:$textColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:2.75rem !default;
+$inputSwitchHeight:1rem !default;
+$inputSwitchBorderRadius:.5rem !default;
+$inputSwitchHandleWidth:1.50rem !default;
+$inputSwitchHandleHeight:1.50rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:-1px !default;
+$inputSwitchSliderOffBg:hsla(0,0%,100%,.3) !default;
+$inputSwitchHandleOffBg:#bdbdbd !default;
+$inputSwitchSliderOffHoverBg:hsla(0,0%,100%,.3) !default;
+$inputSwitchSliderOnBg:rgba($primaryColor, .5) !default;
+$inputSwitchSliderOnHoverBg:rgba($primaryColor, .5) !default;
+$inputSwitchHandleOnBg:$primaryColor !default;
+
+//panel
+$panelHeaderBorderColor: rgba(255,255,255,.12) !default;
+$panelHeaderBorder:1px solid rgba(255,255,255,.12) !default;
+$panelHeaderBg:#1e1e1e !default;
+$panelHeaderTextColor:$textColor !default;
+$panelHeaderFontWeight:500 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:rgba($overlayColor,.04) !default;
+$panelHeaderHoverBorderColor:rgba(255,255,255,.12) !default;
+$panelHeaderTextHoverColor:$textColor !default;
+
+$panelContentBorderColor: rgba(255,255,255,.12) !default;
+$panelContentBorder:1px solid rgba(255,255,255,.12) !default;
+$panelContentBg:#1e1e1e !default;
+$panelContentEvenRowBg: rgba(255,255,255,.02) !default;
+$panelContentTextColor:$textColor !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid rgba(255,255,255,.12) !default;
+$panelFooterBg:#1e1e1e !default;
+$panelFooterTextColor:$textColor !default;
+$panelFooterPadding:1rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:0 none !default;
+$accordionHeaderBg:#1e1e1e !default;
+$accordionHeaderTextColor:$textColor !default;
+$accordionHeaderFontWeight:400 !default;
+$accordionHeaderPadding:1.5rem !default;
+
+$accordionHeaderHoverBg:rgba(255,255,255,.04) !default;
+$accordionHeaderHoverBorderColor:transparent !default;
+$accordionHeaderTextHoverColor:$textColor !default;
+
+$accordionHeaderActiveBg:#1e1e1e !default;
+$accordionHeaderActiveBorderColor:transparent !default;
+$accordionHeaderTextActiveColor:$textColor !default;
+
+$accordionHeaderActiveHoverBg:rgba(255,255,255,.04) !default;
+$accordionHeaderActiveHoverBorderColor:transparent !default;
+$accordionHeaderTextActiveHoverColor:$textColor !default;
+
+$accordionContentBorder:0 none !default;
+$accordionContentBg:#1e1e1e !default;
+$accordionContentTextColor:$textColor !default;
+$accordionContentPadding:1rem 1.5rem !default;
+
+//tabview
+$tabviewNavBorder:solid rgba(255,255,255,.12) !default;
+$tabviewNavBorderWidth:0 0 1px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid rgba(255,255,255,.12) !default;
+$tabviewHeaderBorderWidth:0 0 1px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent rgba(255,255,255,.12) transparent !default;
+$tabviewHeaderBg:transparent !default;
+$tabviewHeaderTextColor:$textSecondaryColor !default;
+$tabviewHeaderFontWeight:500 !default;
+$tabviewHeaderPadding:1rem 1.5rem !default;
+$tabviewHeaderMargin:0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg:rgba($primaryColor,.04) !default;
+$tabviewHeaderHoverBorderColor:rgba(255,255,255,.12) !default;
+$tabviewHeaderTextHoverColor:$textSecondaryColor !default;
+
+$tabviewHeaderActiveBg:transparent !default;
+$tabviewHeaderActiveBorderColor:rgba(255,255,255,.12) !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:transparent !default;
+$tabviewContentTextColor:$textColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:4px !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:rgba(255,255,255,.12) !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$textSecondaryColor !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:#1e1e1e !default;
+$paginatorTextColor:$textColor !default;
+$paginatorBorder:solid #404040 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$textSecondaryColor !default;
+$paginatorElementHoverBg:rgba(255,255,255,.04) !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$textSecondaryColor !default;
+$paginatorElementBorderRadius:50% !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid rgba(255,255,255,.12) !default;
+$tableHeaderBorderWidth:0 0 1px 0 !default;
+$tableHeaderBg:#1e1e1e !default;
+$tableHeaderTextColor:$textColor !default;
+$tableHeaderFontWeight:500 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:#1e1e1e !default;
+$tableHeaderCellTextColor:$textColor !default;
+$tableHeaderCellFontWeight:500 !default;
+$tableHeaderCellBorder:1px solid #404040 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:rgba(255,255,255,.04) !default;
+$tableHeaderCellTextHoverColor:$textColor !default;
+$tableHeaderCellIconColor:$textSecondaryColor !default;
+$tableHeaderCellIconHoverColor:$textSecondaryColor !default;
+$tableHeaderCellHighlightBg:#1e1e1e !default;
+$tableHeaderCellHighlightTextColor:$textColor !default;
+$tableHeaderCellHighlightHoverBg:rgba(255,255,255,.04) !default;
+$tableHeaderCellHighlightTextHoverColor:$textColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:#1e1e1e !default;
+$tableBodyRowTextColor:$textColor !default;
+$tableBodyRowEvenBg:#222222 !default;
+$tableBodyRowHoverBg:rgba(255,255,255,.04) !default;
+$tableBodyRowTextHoverColor:$textColor !default;
+$tableBodyCellBorder:1px solid #404040 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:#1e1e1e !default;
+$tableFooterCellTextColor:$textColor !default;
+$tableFooterCellFontWeight:500 !default;
+$tableFooterCellBorder:1px solid 3404040 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid #404040 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:#1e1e1e !default;
+$tableFooterTextColor:$textColor !default;
+$tableFooterFontWeight:500 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:1rem 0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid rgba(255,255,255,.12) !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:1rem 0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid rgba(255,255,255,.12) !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$highlightBg !default;
+$fullCalendarEventBorderColor:$highlightBg !default;
+$fullCalendarEventBorder:1px solid $highlightBg !default;
+$fullCalendarEventTextColor:$highlightTextColor !default;
+
+//tree
+$treeNodePadding:.25rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$textSecondaryColor !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:#bdbdbd !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:#bdbdbd !default;
+
+//org chart
+$organizationChartConnectorColor:rgba(255,255,255,.12) !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding: 1.25rem 1.5rem !default;
+$messageBorderWidth:0 0 0 0 !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:1px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1.5rem !default;
+$toastBorderWidth:0 0 0 0 !default;
+$toastShadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#B3E5FC !default;
+$infoMessageBorder:solid transparent !default;
+$infoMessageTextColor:#01579B !default;
+$infoMessageIconColor:#01579B !default;
+$successMessageBg:#C8E6C9 !default;
+$successMessageBorder:solid transparent !default;
+$successMessageTextColor:#1B5E20 !default;
+$successMessageIconColor:#1B5E20 !default;
+$warningMessageBg:#FFECB3 !default;
+$warningMessageBorder:solid transparent !default;
+$warningMessageTextColor:#7f6003 !default;
+$warningMessageIconColor:#7f6003 !default;
+$errorMessageBg:#FFCDD2 !default;
+$errorMessageBorder:solid transparent !default;
+$errorMessageTextColor:#B71C1C !default;
+$errorMessageIconColor:#B71C1C !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:#262626 !default;
+$overlayContainerShadow:0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$overlayContentBg !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$textColor !default;
+$dialogHeaderFontWeight:500 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding: 0 1.5rem 1.5rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:1rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:1.5rem !default;
+$confirmPopupFooterPadding:0 1.5rem 1rem 1.5rem !default;
+
+//tooltip
+$tooltipBg:#444444 !default;
+$tooltipTextColor:$emphasis-high !default;
+$tooltipPadding:.5rem !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:1px solid transparent !default;
+$stepsItemTextColor:$textColor !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$textColor !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:500 !default;
+
+//progressbar
+$progressBarHeight:4px !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:rgba($primaryColor, .32) !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:#1e1e1e !default;
+$menuBorder:1px solid rgba(255,255,255,.12) !default;
+$menuTextColor:$textColor !default;
+$menuitemPadding:1rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$textColor !default;
+$menuitemIconColor:$textSecondaryColor !default;
+$menuitemTextHoverColor:$textColor !default;
+$menuitemIconHoverColor:$textSecondaryColor !default;
+$menuitemHoverBg:rgba(255,255,255,.04) !default;
+$menuitemTextActiveColor:$textColor !default;
+$menuitemIconActiveColor:$textSecondaryColor !default;
+$menuitemActiveBg:rgba(255,255,255,.04) !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:1rem !default;
+$submenuHeaderBg:transparent !default;
+$submenuHeaderTextColor:$textSecondaryColor !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:400 !default;
+$overlayMenuBg:#2b2b2b !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.5rem 0 !default;
+$menuSeparatorMargin:.5rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:#1e1e1e !default;
+$breadcrumbBorder:1px solid rgba(255,255,255,.12) !default;
+$breadcrumbItemTextColor:$textColor !default;
+$breadcrumbItemIconColor:$textSecondaryColor !default;
+$breadcrumbLastItemTextColor:$textColor !default;
+$breadcrumbLastItemIconColor:$textSecondaryColor !default;
+$breadcrumbSeparatorColor:$textSecondaryColor !default;
+
+$horizontalMenuPadding:1rem !default;
+$horizontalMenuBg:#1e1e1e !default;
+$horizontalMenuBorder:1px solid rgba(255,255,255,.12) !default;
+$horizontalMenuTextColor:$textColor !default;
+$horizontalMenuRootMenuitemPadding:1rem !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$textColor !default;
+$horizontalMenuRootMenuitemIconColor:$textSecondaryColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$textColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$textSecondaryColor !default;
+$horizontalMenuRootMenuitemHoverBg:rgba($overlayColor,.04) !default;
+$horizontalMenuRootMenuitemTextActiveColor:$textColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$textSecondaryColor !default;
+$horizontalMenuRootMenuitemActiveBg:rgba($overlayColor,.04) !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:rgba(255,255,255,.3) !default;
+$carouselIndicatorHoverBg:rgba(255,255,255,.6) !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:rgba(255,255,255,.87) !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:rgba(255,255,255,.87) !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:rgba(255,255,255,.87) !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:rgba(255,255,255,.87) !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:50% !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:rgba(255,255,255,.87) !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:rgba(255,255,255,.3) !default;
+$galleriaIndicatorHoverBg:rgba(255,255,255,.6) !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1.25rem !default;
+$galleriaIndicatorHeight:1.25rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.3) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:rgba(255,255,255,.87) !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:rgba(255,255,255,.87) !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1.25rem 0 !default;
+$dividerHorizontalPadding:0 1.25rem !default;
+$dividerVerticalMargin:0 1.25rem !default;
+$dividerVerticalPadding:1.25rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:hsla(0,0%,100%,.12) !default;
+
+//avatar
+$avatarBg:hsla(0,0%,100%,.12) !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:hsla(0,0%,100%,.12) !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$accentColor !default;
+$scrollTopHoverBg:rgba($accentColor, .92) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$accentTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:hsla(0,0%,100%,.04) !default;
+$splitterGutterHandleBg:hsla(0,0%,100%,.12) !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 2rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $accentColor !default;
+$speedDialActionHoverBg: rgba($accentColor, .92) !default;
+$speedDialActionTextColor: #212121 !default;
+$speedDialActionTextHoverColor: #212121 !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#1e1e1e;
+    --surface-b:#121212;
+    --surface-c:hsla(0,0%,100%,.04);
+    --surface-d:hsla(0,0%,100%,.12);
+    --surface-e:#1e1e1e;
+    --surface-f:#262626;
+    --text-color:#{$textColor};
+    --text-color-secondary:#{$textSecondaryColor};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #121212;
+    --surface-50: #2a2a2a;
+    --surface-100: #414141;
+    --surface-200: #595959;
+    --surface-300: #717171;
+    --surface-400: #898989;
+    --surface-500: #a0a0a0;
+    --surface-600: #b8b8b8;
+    --surface-700: #d0d0d0;
+    --surface-800: #e7e7e7;
+    --surface-900: #ffffff;
+    --gray-50: #e7e7e7;
+    --gray-100: #d0d0d0;
+    --gray-200: #b8b8b8;
+    --gray-300: #a0a0a0;
+    --gray-400: #898989;
+    --gray-500: #717171;
+    --gray-600: #595959;
+    --gray-700: #414141;
+    --gray-800: #2a2a2a;
+    --gray-900: #121212;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#121212;
+    --surface-section:#121212;
+    --surface-card:#1e1e1e;
+    --surface-overlay:#262626;
+    --surface-border:hsla(0,0%,100%,.12);
+    --surface-hover:hsla(0,0%,100%,.04);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/deeppurple/_extensions.scss b/themes/material/material-dark/compact/deeppurple/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-dark/compact/deeppurple/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/deeppurple/_fonts.scss b/themes/material/material-dark/compact/deeppurple/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-dark/compact/deeppurple/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/deeppurple/_variables.scss b/themes/material/material-dark/compact/deeppurple/_variables.scss
new file mode 100644
index 0000000..5f7addb
--- /dev/null
+++ b/themes/material/material-dark/compact/deeppurple/_variables.scss
@@ -0,0 +1,7 @@
+$primaryColor:#CE93D8 !default;
+$primaryTextColor:#121212 !default;
+$accentColor:#A5D6A7 !default;
+$accentTextColor:#121212 !default;
+
+@import '../../variables';
+@import '../../../_compact';
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-dark/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-dark/compact/deeppurple/theme.scss b/themes/material/material-dark/compact/deeppurple/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-dark/compact/deeppurple/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-dark/compact/indigo/_extensions.scss b/themes/material/material-dark/compact/indigo/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-dark/compact/indigo/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/indigo/_fonts.scss b/themes/material/material-dark/compact/indigo/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-dark/compact/indigo/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/indigo/_variables.scss b/themes/material/material-dark/compact/indigo/_variables.scss
new file mode 100644
index 0000000..1a783f4
--- /dev/null
+++ b/themes/material/material-dark/compact/indigo/_variables.scss
@@ -0,0 +1,7 @@
+$primaryColor:#9FA8DA !default;
+$primaryTextColor:#121212 !default;
+$accentColor:#F48FB1 !default;
+$accentTextColor:#121212 !default;
+
+@import '../../variables';
+@import '../../../_compact';
\ No newline at end of file
diff --git a/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-dark/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-dark/compact/indigo/theme.scss b/themes/material/material-dark/compact/indigo/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-dark/compact/indigo/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-dark/standard/deeppurple/_extensions.scss b/themes/material/material-dark/standard/deeppurple/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-dark/standard/deeppurple/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-dark/standard/deeppurple/_fonts.scss b/themes/material/material-dark/standard/deeppurple/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-dark/standard/deeppurple/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-dark/standard/deeppurple/_variables.scss b/themes/material/material-dark/standard/deeppurple/_variables.scss
new file mode 100644
index 0000000..e3dcd78
--- /dev/null
+++ b/themes/material/material-dark/standard/deeppurple/_variables.scss
@@ -0,0 +1,6 @@
+$primaryColor:#CE93D8 !default;
+$primaryTextColor:#121212 !default;
+$accentColor:#A5D6A7 !default;
+$accentTextColor:#121212 !default;
+
+@import '../../variables';
\ No newline at end of file
diff --git a/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-dark/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-dark/standard/deeppurple/theme.scss b/themes/material/material-dark/standard/deeppurple/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-dark/standard/deeppurple/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-dark/standard/indigo/_extensions.scss b/themes/material/material-dark/standard/indigo/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-dark/standard/indigo/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-dark/standard/indigo/_fonts.scss b/themes/material/material-dark/standard/indigo/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-dark/standard/indigo/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-dark/standard/indigo/_variables.scss b/themes/material/material-dark/standard/indigo/_variables.scss
new file mode 100644
index 0000000..d107f96
--- /dev/null
+++ b/themes/material/material-dark/standard/indigo/_variables.scss
@@ -0,0 +1,6 @@
+$primaryColor:#9FA8DA !default;
+$primaryTextColor:#121212 !default;
+$accentColor:#F48FB1 !default;
+$accentTextColor:#121212 !default;
+
+@import '../../variables';
\ No newline at end of file
diff --git a/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-dark/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-dark/standard/indigo/theme.scss b/themes/material/material-dark/standard/indigo/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-dark/standard/indigo/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-light/_variables.scss b/themes/material/material-light/_variables.scss
new file mode 100644
index 0000000..283e2c4
--- /dev/null
+++ b/themes/material/material-light/_variables.scss
@@ -0,0 +1,878 @@
+$colors: (
+    "blue": #2196F3,
+    "green": #689F38,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #4E5FBB,
+    "teal": #009688,
+    "orange": #FF9800,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #F44336,
+    "primary": $primaryColor
+) !default;
+
+$emphasis-high:rgba(0,0,0,.87) !default;
+$emphasis-medium:rgba(0,0,0,.60) !default;
+$emphasis-low:rgba(0,0,0,.38) !default;
+$emphasis-lower:rgba(0,0,0,.12) !default;
+$overlayColor:#000000 !default;
+
+//global
+$fontFamily:Roboto,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$emphasis-high !default;
+$textSecondaryColor:$emphasis-medium !default;
+$borderRadius:4px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1) !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:none !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid rgba(0,0,0,.12) !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.38 !default;
+$maskBg:rgba(0, 0, 0, 0.32) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#B00020 !default;
+
+//selected state
+$highlightBg:rgba($primaryColor, .12) !default;
+$highlightTextColor:$primaryColor !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:transparent !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:none !default;
+
+//action icons
+$actionIconWidth:2.5rem !default;
+$actionIconHeight:2.5rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$textSecondaryColor !default;
+$actionIconHoverBg:rgba(0,0,0,.04) !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$textSecondaryColor !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:1rem 1rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:#ffffff !default;
+$inputTextColor:$emphasis-high !default;
+$inputIconColor:$emphasis-medium !default;
+$inputBorder:1px solid $emphasis-low !default;
+$inputHoverBorderColor:$emphasis-high !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$emphasis-medium !default;
+$inputFilledBg:#f5f5f5 !default;
+$inputFilledHoverBg:#ececec !default;
+$inputFilledFocusBg:#dcdcdc !default;
+
+//input groups
+$inputGroupBg:$inputBg !default;
+$inputGroupTextColor:$emphasis-medium !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:#ffffff !default;
+$inputListTextColor:$textColor !default;
+$inputListBorder:1px solid #e5e5e5 !default;
+$inputListPadding:0 !default;
+$inputListItemPadding:1rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$textColor !default;
+$inputListItemHoverBg:rgba(0,0,0,.04) !default;
+$inputListItemTextHoverColor:$textColor !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:none !default;
+$inputListHeaderPadding:1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:#ffffff !default;
+$inputListHeaderTextColor:$textColor !default;
+$inputListHeaderBorder:1px solid rgba(0,0,0,.12) !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:rgba($primaryColor, .32) !default;
+$passwordWeakBg:#D32F2F !default;
+$passwordMediumBg:#FBC02D !default;
+$passwordStrongBg:#689F38 !default;
+
+//button
+$buttonPadding:0.714rem 1rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:0.714rem !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:0 none !default;
+$buttonHoverBg:rgba($primaryColor, .92) !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:transparent !default;
+$buttonActiveBg:rgba($primaryColor, .68) !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:transparent !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:0 none !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:rgba(0,0,0,.04) !default;
+$plainButtonActiveBgColor:rgba(0,0,0,.16) !default;
+
+$secondaryButtonBg:$accentColor !default;
+$secondaryButtonTextColor:$accentTextColor !default;
+$secondaryButtonBorder:0 none !default;
+$secondaryButtonHoverBg:rgba($accentColor, .92) !default;
+$secondaryButtonTextHoverColor:$accentTextColor !default;
+$secondaryButtonHoverBorderColor:transparent !default;
+$secondaryButtonActiveBg:rgba($accentColor, .68) !default;
+$secondaryButtonTextActiveColor:$accentTextColor !default;
+$secondaryButtonActiveBorderColor:transparent !default;
+$secondaryButtonFocusShadow:none !default;
+
+$infoButtonBg:#2196F3 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:0 none !default;
+$infoButtonHoverBg:rgba(#2196F3, .92) !default;
+$infoButtonTextHoverColor:#ffffff !default;
+$infoButtonHoverBorderColor:transparent !default;
+$infoButtonActiveBg:rgba(#2196F3, .68) !default;
+$infoButtonTextActiveColor:#ffffff !default;
+$infoButtonActiveBorderColor:transparent !default;
+$infoButtonFocusShadow:none !default;
+
+$successButtonBg:#689F38 !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:0 none !default;
+$successButtonHoverBg:rgba(#689F38, .92) !default;
+$successButtonTextHoverColor:#ffffff !default;
+$successButtonHoverBorderColor:transparent !default;
+$successButtonActiveBg:rgba(#689F38, .68) !default;
+$successButtonTextActiveColor:#ffffff !default;
+$successButtonActiveBorderColor:transparent !default;
+$successButtonFocusShadow:none !default;
+
+$warningButtonBg:#FBC02D !default;
+$warningButtonTextColor:#212529 !default;
+$warningButtonBorder:0 none !default;
+$warningButtonHoverBg:rgba(#FBC02D, .92) !default;
+$warningButtonTextHoverColor:#212529 !default;
+$warningButtonHoverBorderColor:transparent !default;
+$warningButtonActiveBg:rgba(#FBC02D, .68) !default;
+$warningButtonTextActiveColor:#212529 !default;
+$warningButtonActiveBorderColor:transparent !default;
+$warningButtonFocusShadow:none !default;
+
+$helpButtonBg:#9C27B0 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:0 none !default;
+$helpButtonHoverBg:rgba(#9C27B0, .92) !default;
+$helpButtonTextHoverColor:#ffffff !default;
+$helpButtonHoverBorderColor:transparent !default;
+$helpButtonActiveBg:rgba(#9C27B0, .68) !default;
+$helpButtonTextActiveColor:#ffffff !default;
+$helpButtonActiveBorderColor:transparent !default;
+$helpButtonFocusShadow:none !default;
+
+$dangerButtonBg:#D32F2F !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:0 none !default;
+$dangerButtonHoverBg:rgba(#D32F2F, .92) !default;
+$dangerButtonTextHoverColor:#ffffff !default;
+$dangerButtonHoverBorderColor:transparent !default;
+$dangerButtonActiveBg:rgba(#D32F2F, .68) !default;
+$dangerButtonTextActiveColor:#ffffff !default;
+$dangerButtonActiveBorderColor:transparent !default;
+$dangerButtonFocusShadow:none !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:none !default;
+
+//checkbox
+$checkboxWidth:18px !default;
+$checkboxHeight:18px !default;
+$checkboxBorder:2px solid #757575 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid #757575 !default;
+$radiobuttonIconSize:10px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryTextColor !default;
+$radiobuttonIconActiveColor:$primaryColor !default;
+$radiobuttonActiveHoverBg:$primaryTextColor !default;
+$radiobuttonIconActiveHoverColor:$primaryColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:#ffffff !default;
+
+//togglebutton
+$toggleButtonBg:#ffffff !default;
+$toggleButtonBorder:1px solid rgba(0,0,0,.12) !default;
+$toggleButtonTextColor:$textColor !default;
+$toggleButtonIconColor:$textSecondaryColor !default;
+$toggleButtonHoverBg:#f6f6f6 !default;
+$toggleButtonHoverBorderColor:rgba(0,0,0,.12) !default;
+$toggleButtonTextHoverColor:$textColor !default;
+$toggleButtonIconHoverColor:$textSecondaryColor !default;
+$toggleButtonActiveBg:#e0e0e1 !default;
+$toggleButtonActiveBorderColor:#e0e0e1 !default;
+$toggleButtonTextActiveColor:$textColor !default;
+$toggleButtonIconActiveColor:$textSecondaryColor !default;
+$toggleButtonActiveHoverBg:#d9d8d9 !default;
+$toggleButtonActiveHoverBorderColor:#d9d8d9 !default;
+$toggleButtonTextActiveHoverColor:$textColor !default;
+$toggleButtonIconActiveHoverColor:$textSecondaryColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:rgba(0,0,0,.04) !default;
+$inplaceTextHoverColor:$textColor !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#B00020 !default;
+$ratingCancelIconHoverColor:#B00020 !default;
+$ratingStarIconOffColor:$primaryColor !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:#c1c1c1 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:2px !default;
+$sliderVerticalWidth:2px !default;
+$sliderHandleWidth:20px !default;
+$sliderHandleHeight:20px !default;
+$sliderHandleBg:$primaryColor !default;
+$sliderHandleBorder:0 none !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:0 none !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:#ffffff !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$textColor !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:#ffffff !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:$divider !default;
+$calendarHeaderTextColor:$textColor !default;
+$calendarHeaderFontWeight:500 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:rgba(0,0,0,.04) !default;
+$calendarCellDateTodayBg:#ffffff !default;
+$calendarCellDateTodayBorderColor: rgba(0,0,0,12) !default;
+$calendarCellDateTodayTextColor:$textColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:2.75rem !default;
+$inputSwitchHeight:1rem !default;
+$inputSwitchBorderRadius:.5rem !default;
+$inputSwitchHandleWidth:1.50rem !default;
+$inputSwitchHandleHeight:1.50rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:-1px !default;
+$inputSwitchSliderOffBg:rgba(0,0,0,.38) !default;
+$inputSwitchHandleOffBg:#ffffff !default;
+$inputSwitchSliderOffHoverBg:rgba(0,0,0,.38) !default;
+$inputSwitchSliderOnBg:rgba($primaryColor, .5) !default;
+$inputSwitchSliderOnHoverBg:rgba($primaryColor, .5) !default;
+$inputSwitchHandleOnBg:$primaryColor !default;
+
+//panel
+$panelHeaderBorderColor: #e0e0e0 !default;
+$panelHeaderBorder:1px solid #e0e0e0 !default;
+$panelHeaderBg:#ffffff !default;
+$panelHeaderTextColor:$textColor !default;
+$panelHeaderFontWeight:500 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:rgba(0,0,0,.04) !default;
+$panelHeaderHoverBorderColor:#e0e0e0 !default;
+$panelHeaderTextHoverColor:$textColor !default;
+
+$panelContentBorderColor: #e0e0e0 !default;
+$panelContentBorder:1px solid #e0e0e0 !default;
+$panelContentBg:#ffffff !default;
+$panelContentEvenRowBg:rgba(0,0,0,.02) !default;
+$panelContentTextColor:$textColor !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid #e0e0e0 !default;
+$panelFooterBg:#ffffff !default;
+$panelFooterTextColor:$textColor !default;
+$panelFooterPadding:1rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:0 none !default;
+$accordionHeaderBg:#ffffff !default;
+$accordionHeaderTextColor:$textColor !default;
+$accordionHeaderFontWeight:400 !default;
+$accordionHeaderPadding:1.5rem !default;
+
+$accordionHeaderHoverBg:#f6f6f6 !default;
+$accordionHeaderHoverBorderColor:transparent !default;
+$accordionHeaderTextHoverColor:$textColor !default;
+
+$accordionHeaderActiveBg:#ffffff !default;
+$accordionHeaderActiveBorderColor:transparent !default;
+$accordionHeaderTextActiveColor:$textColor !default;
+
+$accordionHeaderActiveHoverBg:#ffffff !default;
+$accordionHeaderActiveHoverBorderColor:transparent !default;
+$accordionHeaderTextActiveHoverColor:$textColor !default;
+
+$accordionContentBorder:0 none !default;
+$accordionContentBg:#ffffff !default;
+$accordionContentTextColor:$textColor !default;
+$accordionContentPadding:1rem 1.5rem !default;
+
+//tabview
+$tabviewNavBorder:solid rgba(0,0,0,.12) !default;
+$tabviewNavBorderWidth:0 0 1px 0 !default;
+$tabviewNavBg:#ffffff !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid rgba(0,0,0,.12) !default;
+$tabviewHeaderBorderWidth:0 0 1px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent rgba(0,0,0,.12) transparent !default;
+$tabviewHeaderBg:#ffffff !default;
+$tabviewHeaderTextColor:$textSecondaryColor !default;
+$tabviewHeaderFontWeight:500 !default;
+$tabviewHeaderPadding:1rem 1.5rem !default;
+$tabviewHeaderMargin:0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg:rgba($primaryColor,.04) !default;
+$tabviewHeaderHoverBorderColor:rgba(0,0,0,.12) !default;
+$tabviewHeaderTextHoverColor:$textSecondaryColor !default;
+
+$tabviewHeaderActiveBg:#ffffff !default;
+$tabviewHeaderActiveBorderColor:rgba(0,0,0,.12) !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:#ffffff !default;
+$tabviewContentTextColor:$textColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:4px !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:rgba(0,0,0,.12) !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$textSecondaryColor !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:#ffffff !default;
+$paginatorTextColor:$textColor !default;
+$paginatorBorder:solid #e4e4e4 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$textSecondaryColor !default;
+$paginatorElementHoverBg:rgba(0,0,0,.04) !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$textSecondaryColor !default;
+$paginatorElementBorderRadius:50% !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid #e4e4e4 !default;
+$tableHeaderBorderWidth:0 0 1px 0 !default;
+$tableHeaderBg:#ffffff !default;
+$tableHeaderTextColor:$textColor !default;
+$tableHeaderFontWeight:500 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:#ffffff !default;
+$tableHeaderCellTextColor:$textColor !default;
+$tableHeaderCellFontWeight:500 !default;
+$tableHeaderCellBorder:1px solid #e4e4e4 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:rgba(0,0,0,.04) !default;
+$tableHeaderCellTextHoverColor:$textColor !default;
+$tableHeaderCellIconColor:$textSecondaryColor !default;
+$tableHeaderCellIconHoverColor:$textSecondaryColor !default;
+$tableHeaderCellHighlightBg:#ffffff !default;
+$tableHeaderCellHighlightTextColor:$textColor !default;
+$tableHeaderCellHighlightHoverBg:rgba(0,0,0,.04) !default;
+$tableHeaderCellHighlightTextHoverColor:$textColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:#ffffff !default;
+$tableBodyRowTextColor:$textColor !default;
+$tableBodyRowEvenBg:rgba(0,0,0,.02) !default;
+$tableBodyRowHoverBg:rgba(0,0,0,.04) !default;
+$tableBodyRowTextHoverColor:$textColor !default;
+$tableBodyCellBorder:1px solid #e4e4e4 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:#ffffff !default;
+$tableFooterCellTextColor:$textColor !default;
+$tableFooterCellFontWeight:500 !default;
+$tableFooterCellBorder:1px solid #e4e4e4 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid #e4e4e4 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:#ffffff !default;
+$tableFooterTextColor:$textColor !default;
+$tableFooterFontWeight:500 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:1rem 0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid rgba(0,0,0,.12) !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:1rem 0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid rgba(0,0,0,.12) !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$highlightBg !default;
+$fullCalendarEventBorderColor:$highlightBg !default;
+$fullCalendarEventBorder:1px solid $highlightBg !default;
+$fullCalendarEventTextColor:$highlightTextColor !default;
+
+//tree
+$treeNodePadding:.25rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$textSecondaryColor !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:#bdbdbd !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:#bdbdbd !default;
+
+//org chart
+$organizationChartConnectorColor:rgba(0,0,0,.12) !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding: 1.25rem 1.5rem !default;
+$messageBorderWidth:0 0 0 0 !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:1px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1.5rem !default;
+$toastBorderWidth:0 0 0 0 !default;
+$toastShadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#B3E5FC !default;
+$infoMessageBorder:solid transparent !default;
+$infoMessageTextColor:#01579B !default;
+$infoMessageIconColor:#01579B !default;
+$successMessageBg:#C8E6C9 !default;
+$successMessageBorder:solid transparent !default;
+$successMessageTextColor:#1B5E20 !default;
+$successMessageIconColor:#1B5E20 !default;
+$warningMessageBg:#FFECB3 !default;
+$warningMessageBorder:solid transparent !default;
+$warningMessageTextColor:#7f6003 !default;
+$warningMessageIconColor:#7f6003 !default;
+$errorMessageBg:#FFCDD2 !default;
+$errorMessageBorder:solid transparent !default;
+$errorMessageTextColor:#B71C1C !default;
+$errorMessageIconColor:#B71C1C !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:#ffffff !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$textColor !default;
+$dialogHeaderFontWeight:500 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding: 0 1.5rem 1.5rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:1rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:1.5rem !default;
+$confirmPopupFooterPadding:0 1.5rem 1rem 1.5rem !default;
+
+//tooltip
+$tooltipBg:rgba(97,97,97,.9) !default;
+$tooltipTextColor:#ffffff !default;
+$tooltipPadding:.5rem !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:1px solid transparent !default;
+$stepsItemTextColor:$textColor !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$textColor !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:500 !default;
+
+//progressbar
+$progressBarHeight:4px !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:rgba($primaryColor, .32) !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:#ffffff !default;
+$menuBorder:1px solid #e5e5e5 !default;
+$menuTextColor:$textColor !default;
+$menuitemPadding:1rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$textColor !default;
+$menuitemIconColor:$textSecondaryColor !default;
+$menuitemTextHoverColor:$textColor !default;
+$menuitemIconHoverColor:$textSecondaryColor !default;
+$menuitemHoverBg:rgba(0,0,0,.04) !default;
+$menuitemTextActiveColor:$textColor !default;
+$menuitemIconActiveColor:$textSecondaryColor !default;
+$menuitemActiveBg:rgba(0,0,0,.04) !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:1rem !default;
+$submenuHeaderBg:#ffffff !default;
+$submenuHeaderTextColor:$textSecondaryColor !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:400 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.5rem 0 !default;
+$menuSeparatorMargin:.5rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:#ffffff !default;
+$breadcrumbBorder:1px solid #e5e5e5 !default;
+$breadcrumbItemTextColor:$textColor !default;
+$breadcrumbItemIconColor:$textSecondaryColor !default;
+$breadcrumbLastItemTextColor:$textColor !default;
+$breadcrumbLastItemIconColor:$textSecondaryColor !default;
+$breadcrumbSeparatorColor:$textSecondaryColor !default;
+
+$horizontalMenuPadding:1rem !default;
+$horizontalMenuBg:transparent !default;
+$horizontalMenuBorder:1px solid #e5e5e5 !default;
+$horizontalMenuTextColor:$textColor !default;
+$horizontalMenuRootMenuitemPadding:1rem !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$textColor !default;
+$horizontalMenuRootMenuitemIconColor:$textSecondaryColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$textColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$textSecondaryColor !default;
+$horizontalMenuRootMenuitemHoverBg:rgba(0,0,0,.04) !default;
+$horizontalMenuRootMenuitemTextActiveColor:$textColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$textSecondaryColor !default;
+$horizontalMenuRootMenuitemActiveBg:rgba(0,0,0,.04) !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:#dcdcdc !default;
+$carouselIndicatorHoverBg:#ececec !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:rgba(255,255,255,.87) !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:rgba(255,255,255,.87) !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:#f6f6f6 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:rgba(255,255,255,.87) !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:50% !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:rgba(255,255,255,.87) !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:#dcdcdc !default;
+$galleriaIndicatorHoverBg:#ececec !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1.25rem !default;
+$galleriaIndicatorHeight:1.25rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:rgba(255,255,255,.87) !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:rgba(255,255,255,.87) !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1.25rem 0 !default;
+$dividerHorizontalPadding:0 1.25rem !default;
+$dividerVerticalMargin:0 1.25rem !default;
+$dividerVerticalPadding:1.25rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:rgba(0,0,0,.12) !default;
+
+//avatar
+$avatarBg:rgba(0,0,0,.12) !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:rgba(0,0,0,.12) !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$accentColor !default;
+$scrollTopHoverBg:rgba($accentColor, .92) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$accentTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(0,0,0,.08) !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:rgba(0,0,0,.04) !default;
+$splitterGutterHandleBg:rgba(0,0,0,.12) !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 2rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $accentColor !default;
+$speedDialActionHoverBg: rgba($accentColor, .92) !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#ffffff;
+    --surface-b:#fafafa;
+    --surface-c:rgba(0,0,0,.04);
+    --surface-d:rgba(0,0,0,.12);
+    --surface-e:#ffffff;
+    --surface-f:#ffffff;
+    --text-color:#{$textColor};
+    --text-color-secondary:#{$textSecondaryColor};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #FAFAFA;
+    --surface-100: #F5F5F5;
+    --surface-200: #EEEEEE;
+    --surface-300: #E0E0E0;
+    --surface-400: #BDBDBD;
+    --surface-500: #9E9E9E;
+    --surface-600: #757575;
+    --surface-700: #616161;
+    --surface-800: #424242;
+    --surface-900: #212121;
+    --gray-50: #FAFAFA;
+    --gray-100: #F5F5F5;
+    --gray-200: #EEEEEE;
+    --gray-300: #E0E0E0;
+    --gray-400: #BDBDBD;
+    --gray-500: #9E9E9E;
+    --gray-600: #757575;
+    --gray-700: #616161;
+    --gray-800: #424242;
+    --gray-900: #212121;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#fafafa;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:rgba(0,0,0,.12);
+    --surface-hover:rgba(0,0,0,.04);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/material/material-light/compact/deeppurple/_extensions.scss b/themes/material/material-light/compact/deeppurple/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-light/compact/deeppurple/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-light/compact/deeppurple/_fonts.scss b/themes/material/material-light/compact/deeppurple/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-light/compact/deeppurple/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-light/compact/deeppurple/_variables.scss b/themes/material/material-light/compact/deeppurple/_variables.scss
new file mode 100644
index 0000000..a501022
--- /dev/null
+++ b/themes/material/material-light/compact/deeppurple/_variables.scss
@@ -0,0 +1,7 @@
+$primaryColor:#673AB7 !default;
+$primaryTextColor:#ffffff !default;
+$accentColor:#4CAF50 !default;
+$accentTextColor:#ffffff !default;
+
+@import '../../variables';
+@import '../../../_compact';
\ No newline at end of file
diff --git a/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-light/compact/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-light/compact/deeppurple/theme.scss b/themes/material/material-light/compact/deeppurple/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-light/compact/deeppurple/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-light/compact/indigo/_extensions.scss b/themes/material/material-light/compact/indigo/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-light/compact/indigo/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-light/compact/indigo/_fonts.scss b/themes/material/material-light/compact/indigo/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-light/compact/indigo/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-light/compact/indigo/_variables.scss b/themes/material/material-light/compact/indigo/_variables.scss
new file mode 100644
index 0000000..48caae1
--- /dev/null
+++ b/themes/material/material-light/compact/indigo/_variables.scss
@@ -0,0 +1,7 @@
+$primaryColor:#3F51B5 !default;
+$primaryTextColor:#ffffff !default;
+$accentColor:#ff4081 !default;
+$accentTextColor:#ffffff !default;
+
+@import '../../variables';
+@import '../../../_compact';
\ No newline at end of file
diff --git a/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-light/compact/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-light/compact/indigo/theme.scss b/themes/material/material-light/compact/indigo/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-light/compact/indigo/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-light/standard/deeppurple/_extensions.scss b/themes/material/material-light/standard/deeppurple/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-light/standard/deeppurple/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-light/standard/deeppurple/_fonts.scss b/themes/material/material-light/standard/deeppurple/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-light/standard/deeppurple/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-light/standard/deeppurple/_variables.scss b/themes/material/material-light/standard/deeppurple/_variables.scss
new file mode 100644
index 0000000..4ff4c89
--- /dev/null
+++ b/themes/material/material-light/standard/deeppurple/_variables.scss
@@ -0,0 +1,6 @@
+$primaryColor:#673AB7 !default;
+$primaryTextColor:#ffffff !default;
+$accentColor:#4CAF50 !default;
+$accentTextColor:#ffffff !default;
+
+@import '../../variables';
\ No newline at end of file
diff --git a/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-light/standard/deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-light/standard/deeppurple/theme.scss b/themes/material/material-light/standard/deeppurple/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-light/standard/deeppurple/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/material/material-light/standard/indigo/_extensions.scss b/themes/material/material-light/standard/indigo/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/material/material-light/standard/indigo/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/material/material-light/standard/indigo/_fonts.scss b/themes/material/material-light/standard/indigo/_fonts.scss
new file mode 100644
index 0000000..ba86be9
--- /dev/null
+++ b/themes/material/material-light/standard/indigo/_fonts.scss
@@ -0,0 +1,27 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/material/material-light/standard/indigo/_variables.scss b/themes/material/material-light/standard/indigo/_variables.scss
new file mode 100644
index 0000000..11979cc
--- /dev/null
+++ b/themes/material/material-light/standard/indigo/_variables.scss
@@ -0,0 +1,6 @@
+$primaryColor:#3F51B5 !default;
+$primaryTextColor:#ffffff !default;
+$accentColor:#ff4081 !default;
+$accentTextColor:#ffffff !default;
+
+@import '../../variables';
\ No newline at end of file
diff --git a/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000..fb70b7e
Binary files /dev/null and b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000..96981bc
Binary files /dev/null and b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000..d023f3d
Binary files /dev/null and b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..fd49210
Binary files /dev/null and b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..f9849df
Binary files /dev/null and b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..1f7dd5b
Binary files /dev/null and b/themes/material/material-light/standard/indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/themes/material/material-light/standard/indigo/theme.scss b/themes/material/material-light/standard/indigo/theme.scss
new file mode 100644
index 0000000..e191ca4
--- /dev/null
+++ b/themes/material/material-light/standard/indigo/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../../../designer/_components';
+@import '../../../extensions/vendor_extensions';
+@import './_extensions';
diff --git a/themes/mira/_extensions.scss b/themes/mira/_extensions.scss
new file mode 100644
index 0000000..1373304
--- /dev/null
+++ b/themes/mira/_extensions.scss
@@ -0,0 +1,442 @@
+/* Customizations to the designer theme should be defined here */
+
+@mixin list-item-hover() {
+    box-shadow: inset 0 0 0 .1rem $primaryColorAlt;
+}
+
+//inputtext
+.p-inputtext {
+    &:enabled:hover {
+        background-color: $white100;
+    }
+
+    &:enabled:focus {
+        background-color: $white;
+    }
+}
+
+//chips
+.p-chips {
+    .p-chips-multiple-container {
+        &:not(.p-disabled):hover {
+            background-color: $white100;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $white;
+        }
+    }
+}
+
+//autocomplete
+.p-autocomplete {
+    .p-autocomplete-panel {
+        .p-autocomplete-item{
+            &:not(.p-disabled):hover {
+                @include list-item-hover();
+            }
+        }
+    }
+
+    &.p-autocomplete-multiple {
+        .p-autocomplete-multiple-container {
+            &:not(.p-disabled):hover {
+                background-color: $white100;
+            }
+        }
+    }
+}
+
+//dropdown
+.p-dropdown {
+    &:not(.p-disabled):hover {
+        background-color: $white100;
+    }
+}
+
+.p-dropdown-panel {
+    .p-dropdown-items {
+        .p-dropdown-item {
+            &:not(.p-highlight):not(.p-disabled):hover {
+                @include list-item-hover();
+            }
+        }
+    }
+}
+
+//listbox
+.p-listbox {
+    &:not(.p-disabled) {
+        .p-listbox-item {
+            &:not(.p-disabled):hover {
+                @include list-item-hover();
+            }
+        }
+    }
+}
+
+//multiselect
+.p-multiselect-panel {
+    .p-multiselect-items {
+        .p-multiselect-item {
+            &:not(.p-highlight):not(.p-disabled):hover {
+                @include list-item-hover();
+            }
+        }
+    }
+}
+
+.p-multiselect {
+    &:not(.p-disabled):hover {
+        background-color: $white100;
+    }
+}
+
+//button
+.p-button {
+    font-weight: 500;
+}
+
+//radio
+.p-radiobutton {
+    .p-radiobutton-box {
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background-color: $white300;;
+        }
+
+        &:not(.p-disabled).p-focus {
+            border-color: transparent;
+        }
+    }
+}
+
+//checkbox
+.p-checkbox {
+    &:not(.p-checkbox-disabled) {
+        .p-checkbox-box {
+            &:hover {
+                background-color: $white300;
+            }
+
+            &.p-focus {
+                border-color: transparent;
+            }
+        }
+    }
+}
+
+//accordion
+.p-accordion {
+    .p-accordion-header {
+        &:not(.p-highlight):not(.p-disabled):hover {
+            &:not(.p-disabled) {
+                .p-accordion-header-link {
+                    &:focus {
+                        @include list-item-hover();
+                    }
+                }
+            }
+
+            .p-accordion-header-link {
+                @include list-item-hover();
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            &:hover {
+                .p-accordion-header-link {
+                    @include list-item-hover();
+                }
+            }
+        }
+    }
+}
+
+//calendar
+.p-datepicker {
+    table {
+        td {
+            > span {
+                &.p-highlight {
+                    color: $white;
+                    background: $primaryColor;
+                    &:hover {
+                        background-color: $primaryColorAlt;
+                        border:2px solid $primaryColor;
+                    }
+                }
+            }
+            &.p-datepicker-today {
+                > span {
+                    &.p-highlight {
+                        color: $white;
+                        background: $primaryColor;
+                    }
+                }
+            } 
+        }
+    }
+}
+
+//fieldset
+.p-fieldset {
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            &:hover {
+                @include list-item-hover();
+            }
+        }
+    }
+}
+
+//menubar
+.p-menubar {
+    .p-menuitem-link {
+        &:not(.p-disabled):hover {
+            @include list-item-hover();
+        }
+    }
+
+    .p-menubar-root-list {
+        > .p-menuitem {
+            > .p-menuitem-link {
+                &:not(.p-disabled):hover {
+                    @include list-item-hover();
+                }
+            }
+        }
+    }
+}
+
+//tieredmenu
+.p-tieredmenu {
+    .p-menuitem-link {
+        &:not(.p-disabled):hover {
+            @include list-item-hover();
+        }
+    }
+}
+
+//menu
+.p-menu {
+    .p-menuitem-link {
+        &:not(.p-disabled):hover {
+            @include list-item-hover();
+        }
+    }
+}
+
+//contextmenu
+.p-contextmenu {
+    .p-menuitem-link {
+        &:not(.p-disabled):hover {
+            @include list-item-hover();
+        }
+    }
+}
+
+//paginator
+.p-paginator {
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border: 1px solid $primaryColor;
+        }
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            &:not(.p-highlight):hover {
+                border: 1px solid $primaryColor;
+            }
+        }
+    }
+}
+
+//table
+.p-datatable {
+    .p-sortable-column {
+        &:not(.p-highlight):hover {
+            @include list-item-hover();
+        }
+        &.p-highlight {
+            background-color: $white300;
+            &:hover {
+                @include list-item-hover();
+            }
+        }
+    }
+
+    &.p-datatable-hoverable-rows {
+        .p-datatable-tbody > tr:not(.p-highlight):hover {
+            outline: 1px solid $primaryColorAlt;
+        }
+    }
+}
+
+//overlaypanel
+.p-overlaypanel {
+    .p-overlaypanel-close {
+        &:enabled:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+            border: 2px solid $buttonHoverBorderColor;
+        }
+    }
+}
+
+//picklist
+.p-picklist {
+    .p-picklist-list {
+        .p-picklist-item {
+            &:not(.p-highlight):hover {
+                @include list-item-hover();
+            }
+        }
+    }
+}
+
+//tree
+.p-tree {
+    &.p-tree-horizontal {
+        .p-treenode {
+            .p-treenode-content {
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background: $white;
+                    @include list-item-hover();
+                }
+            }
+        }
+    }
+}
+
+//treetable
+.p-treetable {
+    .p-sortable-column {
+        &:not(.p-highlight):hover {
+            @include list-item-hover();
+        }
+
+        &.p-highlight {
+            background-color: $white300;
+            &:hover {
+                background-color: $white;
+                @include list-item-hover();
+            }
+        }
+
+        &:focus {
+            box-shadow: inset $focusShadow;
+            outline: 0 none;
+        }
+    }
+
+    &.p-treetable-hoverable-rows {
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
+            outline: 1px solid $primaryColorAlt;
+        }
+    }
+}
+
+//megamenu
+.p-megamenu {
+    .p-megamenu-root-list {  
+        > .p-menuitem {
+            > .p-menuitem-link {
+                &:not(.p-disabled):hover {
+                    @include list-item-hover();
+                }
+            }
+        }
+    }
+
+    .p-menuitem-link {
+        &:not(.p-disabled):hover {
+            @include list-item-hover();
+        }
+    }
+}
+
+//panelmenu
+.p-panelmenu {
+    .p-panelmenu-header {
+        &:not(.p-highlight):not(.p-disabled) {
+            > a:hover {
+                @include list-item-hover();
+            }
+        }
+
+        &.p-highlight {
+            &:not(.p-disabled) {
+                > a {
+                    &:hover {
+                        @include list-item-hover();
+                    }
+                }
+            }
+        }
+    }
+    
+    .p-panelmenu-content {
+        .p-menuitem {
+            .p-menuitem-link {
+                &:not(.p-disabled):hover {
+                    @include list-item-hover();
+                }
+            }
+        }
+    }
+}
+
+//slidemenu
+.p-slidemenu {
+    .p-menuitem-link {
+        &:not(.p-disabled):hover {
+            @include list-item-hover();
+        }
+    }
+}
+
+//carousel
+.p-carousel {
+    .p-carousel-indicators {
+        .p-carousel-indicator {
+            &.p-highlight {
+                button {
+                    background: $primaryColor;
+                    color: $white;
+                }
+            }
+        }
+    }
+}
+
+//galleria
+.p-galleria {
+    .p-galleria-indicators {
+        .p-galleria-indicator {
+            &.p-highlight {
+                button {
+                    background: $primaryColor;
+                    color: $white;
+                }
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/mira/_fonts.scss b/themes/mira/_fonts.scss
new file mode 100644
index 0000000..fbc3887
--- /dev/null
+++ b/themes/mira/_fonts.scss
@@ -0,0 +1,33 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
+    @font-face {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 400;
+        src: local('Inter'), local('Inter-Regular'),
+            url('./fonts/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('./fonts/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
+    @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Inter Medium'), local('Inter-Medium'),
+            url('./fonts/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('./fonts/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
+    @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Inter SemiBold'), local('Inter-SemiBold'),
+            url('./fonts/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('./fonts/Inter-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
+    @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Inter Bold'), local('Inter-Bold'),
+            url('./fonts/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+            url('./fonts/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    }
\ No newline at end of file
diff --git a/themes/mira/_variables.scss b/themes/mira/_variables.scss
new file mode 100644
index 0000000..80d75eb
--- /dev/null
+++ b/themes/mira/_variables.scss
@@ -0,0 +1,898 @@
+$primaryColor: #5E81AC !default;
+$primaryColorAlt: #81A1C1 !default;
+$primaryLightColor: #C0D0E0 !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$colors: (
+    "blue": #5E81AC,
+    "green": #7FA366,
+    "yellow": #DAC57A,
+    "cyan": #71ABC2,
+    "pink": #BF6185,
+    "indigo": #4E6AA4,
+    "teal": #5EAC90,
+    "orange": #D08770,
+    "bluegray": #7E8D9F,
+    "purple": #9A6796,
+    "red": #BF616A,
+    "primary": $primaryColor
+) !default;
+
+$infoColor: #639BB2 !default;
+$infoLightColor: #88C0D0 !default;
+$successColor: #7FA366 !default;
+$successLightColor: #A3BE8C !default;
+$warningColor: #D08770 !default;
+$warningLightColor: #E2AC94 !default;
+$helpColor: #9A6796 !default;
+$helpLightColor: #B48EAD !default;
+$dangerColor: #BF616A !default;
+$dangerLightColor: #D88889 !default;
+$yellowColor: #EBCB8B !default;
+
+$black50: #707888 !default;
+$black100: #4C566A !default;
+$black200: #434C5E !default;
+$black300: #3B4252 !default;
+$black400: #2E3440 !default;
+
+$white: #ffffff !default;
+$white100: #ECEFF4 !default;
+$white200: #E5E9F0 !default;
+$white300: #D8DEE9 !default;
+
+//global
+$fontFamily:'Inter', sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$black100 !default;
+$textSecondaryColor:$primaryColorAlt !default;
+$borderRadius:4px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: none !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $white200 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(112, 120, 136, .5) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#BF616A !default;
+
+//highlight
+$highlightBg: $white300 !default;
+$highlightTextColor: $black400 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:2px solid transparent !default;
+$actionIconColor:$primaryColorAlt !default;
+$actionIconHoverBg:$white !default;
+$actionIconHoverBorderColor:$primaryColor !default;
+$actionIconHoverColor:$black100 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .5rem !default;
+$inputTextFontSize:1rem !default;
+
+$inputBg:$white !default;
+$inputTextColor:$black100 !default;
+$inputIconColor:$primaryColorAlt !default;
+$inputBorder:1px solid $white300 !default;
+$inputHoverBorderColor:$primaryColorAlt !default;
+$inputFocusBorderColor:$primaryColorAlt !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$black100 !default;
+$inputFilledBg:$white100 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$white !default;
+
+//input groups
+$inputGroupBg:$white !default;
+$inputGroupTextColor:$primaryColorAlt !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$white !default;
+$inputListTextColor:$black100 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$black100 !default;
+$inputListItemHoverBg:transparent !default;
+$inputListItemTextHoverColor:$black100 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$white100 !default;
+$inputListHeaderTextColor:$black100 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$white200 !default;
+$passwordWeakBg:$dangerColor !default;
+$passwordMediumBg:$warningColor !default;
+$passwordStrongBg:$successColor !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:2px solid $primaryColor !default;
+$buttonHoverBg:$primaryColorAlt !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 4px 4px 0px rgba(0,0,0,.2), 0 12px 10px 0 rgba(0,0,0,.06) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.12 !default;
+$textButtonActiveBgOpacity:.24 !default;
+$outlinedButtonBorder:2px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$white !default;
+$plainButtonActiveBgColor:$white200 !default;
+
+$secondaryButtonBg:$black100 !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:2px solid $black100 !default;
+$secondaryButtonHoverBg:$black50 !default;
+$secondaryButtonTextHoverColor:#ffffff !default;
+$secondaryButtonHoverBorderColor:$black100 !default;
+$secondaryButtonActiveBg:$black400 !default;
+$secondaryButtonTextActiveColor:#ffffff !default;
+$secondaryButtonActiveBorderColor:$black400 !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:$infoColor !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:2px solid $infoButtonBg !default;
+$infoButtonHoverBg:$infoLightColor !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:$infoColor !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:$successColor !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:2px solid $successButtonBg !default;
+$successButtonHoverBg:$successLightColor !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:#7FA366 !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:$warningColor !default;
+$warningButtonTextColor:#ffffff !default;
+$warningButtonBorder:2px solid $warningButtonBg !default;
+$warningButtonHoverBg:$warningLightColor !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:$warningColor !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:$helpColor !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:2px solid $helpButtonBg !default;
+$helpButtonHoverBg:$helpLightColor !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:$helpColor !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:$dangerColor !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:2px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:$dangerLightColor !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:$dangerColor !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $white300 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryColorAlt !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $white300 !default;
+$radiobuttonIconSize:10px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryColorAlt !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:$white !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:2px solid $white300 !default;
+$toggleButtonTextColor:$black100 !default;
+$toggleButtonIconColor:$primaryColorAlt !default;
+$toggleButtonHoverBg:$white100 !default;
+$toggleButtonHoverBorderColor:$primaryColorAlt !default;
+$toggleButtonTextHoverColor:$black100 !default;
+$toggleButtonIconHoverColor:$primaryColorAlt !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryColorAlt !default;
+$toggleButtonActiveHoverBorderColor:$primaryColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$white !default;
+$inplaceTextHoverColor:$black100 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:$dangerColor !default;
+$ratingCancelIconHoverColor:$dangerLightColor !default;
+$ratingStarIconOffColor:$black100 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$white200 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$white !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$white !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$black100 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$white !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $white200 !default;
+$calendarHeaderTextColor:$black100 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:4px !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$white300 !default;
+$calendarCellDateTodayBg:$yellowColor !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$black400 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$white300 !default;
+$inputSwitchHandleOffBg:$primaryColor !default;
+$inputSwitchSliderOffHoverBg:$white100 !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryColorAlt !default;
+$inputSwitchHandleOnBg:$white !default;
+
+//panel
+$panelHeaderBorderColor: $white200 !default;
+$panelHeaderBorder:1px solid $white200 !default;
+$panelHeaderBg:$white !default;
+$panelHeaderTextColor:$black100 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$white !default;
+$panelHeaderHoverBorderColor:$white200 !default;
+$panelHeaderTextHoverColor:$black100 !default;
+
+$panelContentBorderColor: $white200 !default;
+$panelContentBorder:1px solid $white200 !default;
+$panelContentBg:$white !default;
+$panelContentEvenRowBg:scale-color($white100, $lightness: 50%) !default;
+$panelContentTextColor:$black100 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid $white200 !default;
+$panelFooterBg:$white !default;
+$panelFooterTextColor:$black100 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$white !default;
+$accordionHeaderHoverBorderColor:$white200 !default;
+$accordionHeaderTextHoverColor:$black100 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$white200 !default;
+$accordionHeaderTextActiveColor:$black100 !default;
+
+$accordionHeaderActiveHoverBg:$white !default;
+$accordionHeaderActiveHoverBorderColor:$white200 !default;
+$accordionHeaderTextActiveHoverColor:$black100 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:2px solid $white200 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$white !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $white200 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $white200 transparent !default;
+$tabviewHeaderBg:$white !default;
+$tabviewHeaderTextColor:$black100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$white !default;
+$tabviewHeaderHoverBorderColor:$primaryColorAlt !default;
+$tabviewHeaderTextHoverColor:$black100 !default;
+
+$tabviewHeaderActiveBg:$white !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$black100 !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$white100 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$primaryColorAlt !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$white !default;
+$paginatorTextColor:$black100 !default;
+$paginatorBorder:solid $white !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$black100 !default;
+$paginatorElementHoverBg:$white100 !default;
+$paginatorElementHoverBorderColor:$primaryColor !default;
+$paginatorElementIconHoverColor:$black100 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $white !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$white !default;
+$tableHeaderTextColor:$black100 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$white100 !default;
+$tableHeaderCellTextColor:$black100 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $white !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$white !default;
+$tableHeaderCellTextHoverColor:$black100 !default;
+$tableHeaderCellIconColor:$primaryColorAlt !default;
+$tableHeaderCellIconHoverColor:$primaryColorAlt !default;
+$tableHeaderCellHighlightBg:$white100 !default;
+$tableHeaderCellHighlightTextColor:$black100 !default;
+$tableHeaderCellHighlightHoverBg:$white !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$white !default;
+$tableBodyRowTextColor:$black100 !default;
+$tableBodyRowEvenBg:scale-color($white100, $lightness: 50%) !default;
+$tableBodyRowHoverBg:$white !default;
+$tableBodyRowTextHoverColor:$black100 !default;
+$tableBodyCellBorder:1px solid $white100 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$white100 !default;
+$tableFooterCellTextColor:$black100 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $white !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $white !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$white100 !default;
+$tableFooterTextColor:$black100 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $white !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor:$primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0 !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$primaryColorAlt !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$primaryColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$white200 !default;
+
+//org chart
+$organizationChartConnectorColor:$white200 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:scale-color($infoLightColor, $lightness: +40%) !default;
+$infoMessageBorder:solid scale-color($infoColor, $lightness: -50%) !default;
+$infoMessageTextColor:scale-color($infoColor, $lightness: -50%) !default;
+$infoMessageIconColor:scale-color($infoColor, $lightness: -75%) !default;
+$successMessageBg:scale-color($successLightColor, $lightness: +40%) !default;
+$successMessageBorder:solid scale-color($successColor, $lightness: -50%) !default;
+$successMessageTextColor:scale-color($successColor, $lightness: -75%) !default;
+$successMessageIconColor:scale-color($successColor, $lightness: -75%) !default;
+$warningMessageBg:scale-color($warningLightColor, $lightness: +50%) !default;
+$warningMessageBorder:solid scale-color($warningColor, $lightness: -50%) !default;
+$warningMessageTextColor:scale-color($warningColor, $lightness: -75%) !default;
+$warningMessageIconColor:scale-color($warningColor, $lightness: -75%) !default;
+$errorMessageBg:scale-color($dangerLightColor, $lightness: +40%) !default;
+$errorMessageBorder:solid scale-color($dangerColor, $lightness: -50%) !default;
+$errorMessageTextColor:scale-color($dangerColor, $lightness: -75%) !default;
+$errorMessageIconColor:scale-color($dangerColor, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$white !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$black100 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$black100 !default;
+$tooltipTextColor:$white !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$white !default;
+$stepsItemBorder:1px solid $white !default;
+$stepsItemTextColor:$primaryColorAlt !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$black100 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$white200 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$white !default;
+$menuBorder:1px solid $white200 !default;
+$menuTextColor:$black100 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$black100 !default;
+$menuitemIconColor:$primaryColorAlt !default;
+$menuitemTextHoverColor:$black100 !default;
+$menuitemIconHoverColor:$primaryColorAlt !default;
+$menuitemHoverBg:$white !default;
+$menuitemTextActiveColor:$black100 !default;
+$menuitemIconActiveColor:$primaryColorAlt !default;
+$menuitemActiveBg:$white !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$white !default;
+$submenuHeaderTextColor:$black100 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$white100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$white200 !default;
+$carouselIndicatorHoverBg:$primaryColorAlt !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$white100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$white100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$white100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$white100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$white100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$white300 !default;
+$galleriaIndicatorHoverBg:$primaryColorAlt !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$white100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$white100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$white200 !default;
+
+//avatar
+$avatarBg:$white200 !default;
+$avatarTextColor:$textColor !default;
+
+//avatar
+$chipBg:$white200 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$white100 !default;
+
+//skeleton
+$skeletonBg:$white200 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$white100 !default;
+$splitterGutterHandleBg:#c2c7d1 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 2rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $black100 !default;
+$speedDialActionHoverBg: $black300 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$white};
+    --surface-b:#{$white100};
+    --surface-c:#{$white300};
+    --surface-d:#{$white200};
+    --surface-e:#{$white};
+    --surface-f:#{$white};
+    --text-color:#{$black100};
+    --text-color-secondary:#{$primaryColorAlt};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #edeef0;
+    --surface-100: #dbdde1;
+    --surface-200: #b7bbc3;
+    --surface-300: #949aa6;
+    --surface-400: #707888;
+    --surface-500: #4c566a;
+    --surface-600: #3d4555;
+    --surface-700: #2e3440;
+    --surface-800: #1e222a;
+    --surface-900: #0f1115;
+    --gray-50: #edeef0;
+    --gray-100: #dbdde1;
+    --gray-200: #b7bbc3;
+    --gray-300: #949aa6;
+    --gray-400: #707888;
+    --gray-500: #4c566a;
+    --gray-600: #3d4555;
+    --gray-700: #2e3440;
+    --gray-800: #1e222a;
+    --gray-900: #0f1115;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#ECEFF4;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#E5E9F0;
+    --surface-hover:#D8DEE9;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/mira/fonts/Inter-Bold.woff b/themes/mira/fonts/Inter-Bold.woff
new file mode 100644
index 0000000..110bb66
Binary files /dev/null and b/themes/mira/fonts/Inter-Bold.woff differ
diff --git a/themes/mira/fonts/Inter-Bold.woff2 b/themes/mira/fonts/Inter-Bold.woff2
new file mode 100644
index 0000000..2532ddd
Binary files /dev/null and b/themes/mira/fonts/Inter-Bold.woff2 differ
diff --git a/themes/mira/fonts/Inter-Medium.woff b/themes/mira/fonts/Inter-Medium.woff
new file mode 100644
index 0000000..1180184
Binary files /dev/null and b/themes/mira/fonts/Inter-Medium.woff differ
diff --git a/themes/mira/fonts/Inter-Medium.woff2 b/themes/mira/fonts/Inter-Medium.woff2
new file mode 100644
index 0000000..1245455
Binary files /dev/null and b/themes/mira/fonts/Inter-Medium.woff2 differ
diff --git a/themes/mira/fonts/Inter-Regular.woff b/themes/mira/fonts/Inter-Regular.woff
new file mode 100644
index 0000000..5785a99
Binary files /dev/null and b/themes/mira/fonts/Inter-Regular.woff differ
diff --git a/themes/mira/fonts/Inter-Regular.woff2 b/themes/mira/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000..52c1e3b
Binary files /dev/null and b/themes/mira/fonts/Inter-Regular.woff2 differ
diff --git a/themes/mira/fonts/Inter-SemiBold.woff b/themes/mira/fonts/Inter-SemiBold.woff
new file mode 100644
index 0000000..6ddf47e
Binary files /dev/null and b/themes/mira/fonts/Inter-SemiBold.woff differ
diff --git a/themes/mira/fonts/Inter-SemiBold.woff2 b/themes/mira/fonts/Inter-SemiBold.woff2
new file mode 100644
index 0000000..3ba0884
Binary files /dev/null and b/themes/mira/fonts/Inter-SemiBold.woff2 differ
diff --git a/themes/mira/theme.scss b/themes/mira/theme.scss
new file mode 100644
index 0000000..19a9547
--- /dev/null
+++ b/themes/mira/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../designer/_components';
+@import './_extensions';
+
diff --git a/themes/mytheme/_extensions.scss b/themes/mytheme/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/mytheme/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/mytheme/_fonts.scss b/themes/mytheme/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/mytheme/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/mytheme/_variables.scss b/themes/mytheme/_variables.scss
new file mode 100644
index 0000000..7445a84
--- /dev/null
+++ b/themes/mytheme/_variables.scss
@@ -0,0 +1,80 @@
+$primaryColor: #2196F3;
+$primaryDarkColor: #1E88E5;
+$primaryDarkerColor: #1976D2;
+$primaryTextColor: #ffffff;
+
+$colors: (
+    "blue": #2196F3,
+    "green": #4caf50,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #3F51B5,
+    "teal": #009688,
+    "orange": #F57C00,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #FF4032,
+    "primary": $primaryColor
+);
+
+// Mandatory Designer Variables
+@import './variables/general';
+@import './variables/form';
+@import './variables/button';
+@import './variables/panel';
+@import './variables/_data';
+@import './variables/_overlay';
+@import './variables/_message';
+@import './variables/_menu';
+@import './variables/_media';
+@import './variables/_misc';
+
+:root {
+    --surface-a:#ffffff;
+    --surface-b:#f8f9fa;
+    --surface-c:#e9ecef;
+    --surface-d:#dee2e6;
+    --surface-e:#ffffff;
+    --surface-f:#ffffff;
+    --text-color:#495057;
+    --text-color-secondary:#6c757d;
+    --primary-color:#2196F3;
+    --primary-color-text:#ffffff;
+    --font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --surface-0: #ffffff;
+    --surface-50: #FAFAFA;
+    --surface-100: #F5F5F5;
+    --surface-200: #EEEEEE;
+    --surface-300: #E0E0E0;
+    --surface-400: #BDBDBD;
+    --surface-500: #9E9E9E;
+    --surface-600: #757575;
+    --surface-700: #616161;
+    --surface-800: #424242;
+    --surface-900: #212121;
+    --gray-50: #FAFAFA;
+    --gray-100: #F5F5F5;
+    --gray-200: #EEEEEE;
+    --gray-300: #E0E0E0;
+    --gray-400: #BDBDBD;
+    --gray-500: #9E9E9E;
+    --gray-600: #757575;
+    --gray-700: #616161;
+    --gray-800: #424242;
+    --gray-900: #212121;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#f8f9fa;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dee2e6;
+    --surface-hover:#e9ecef;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/css/main.css b/themes/mytheme/sassdoc/assets/css/main.css
new file mode 100644
index 0000000..c8fe8e7
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/css/main.css
@@ -0,0 +1 @@
+.container:after,.header:after,.searchbar:after{content:"";display:table;clear:both}.visually-hidden{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.sidebar__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}code[class*='language-'],pre[class*='language-']{color:black;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*='language-']::-moz-selection,pre[class*='language-'] ::-moz-selection,code[class*='language-']::-moz-selection,code[class*='language-'] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*='language-']::selection,pre[class*='language-'] ::selection,code[class*='language-']::selection,code[class*='language-'] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*='language-'],pre[class*='language-']{text-shadow:none}}pre[class*='language-']{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*='language-'],pre[class*='language-']{background:white}:not(pre)>code[class*='language-']{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905}.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.regex,.token.important{color:#e90}.token.important{font-weight:bold}.token.entity{cursor:help}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*::after,*::before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body{font:1em/1.35 "Open Sans","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif;overflow:auto;margin:0}a{transition:0.15s;text-decoration:none;color:#dd5a6f}a:hover,a:hover code{color:#333}table p{margin:0 0 .5rem}:not(pre)>code{color:#dd5a6f;white-space:nowrap;font-weight:normal}@media (max-width: 800px){table,tbody,tr,td,th{display:block}thead{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}tr{padding-bottom:1em;margin-bottom:1em;border-bottom:2px solid #ddd}td::before,th::before{content:attr(data-label) ": ";text-transform:capitalize;font-weight:bold}td p,th p{display:inline}}.layout-toggle{display:none}@media (min-width: 801px){.layout-toggle{position:absolute;top:8px;left:20px;font-size:2em;cursor:pointer;color:white;display:block}}@media (min-width: 801px){.sidebar-closed .sidebar{-webkit-transform:translateX(-280px);-ms-transform:translateX(-280px);transform:translateX(-280px)}.sidebar-closed .main{padding-left:0}.sidebar-closed .header{left:0}}.list-unstyled{padding-left:0;list-style:none;line-height:1.5;margin-top:0;margin-bottom:1.5rem}.list-inline li{display:inline-block}.container{max-width:100%;width:1170px;margin:0 auto;padding:0 2rem}.relative{position:relative}.clear{clear:both}.header{position:fixed;top:0;right:0;left:280px;box-shadow:0 2px 5px rgba(0,0,0,0.26);padding:1em 0;background:#dd5a6f;color:#e0e0e0;z-index:4000}@media (max-width: 800px){.header{left:0}}@media (min-width: 801px){.header{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}.header__title{font-weight:500;text-align:center;margin:0 0 0.5em 0}.header__title a{color:#e0e0e0}@media (min-width: 801px){.header__title{float:left;font-size:1em;margin-top:.25em;margin-bottom:0}}.searchbar{display:inline-block;float:right}@media (max-width: 800px){.searchbar{display:block;float:none}}.searchbar__form{float:right;position:relative}@media (max-width: 800px){.searchbar__form{float:none}}@media (min-width: 801px){.searchbar__form{min-width:15em}}.searchbar__field{border:none;padding:0.5em;font-size:1em;margin:0;width:100%;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0}.searchbar__suggestions{position:absolute;top:100%;right:0;left:0;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;background:white;padding:0;margin:0;list-style:none;z-index:2}.searchbar__suggestions:empty{display:none}.searchbar__suggestions .selected{background:#ddd}.searchbar__suggestions li{border-bottom:1px solid #e0e0e0}.searchbar__suggestions li:last-of-type{border:none}.searchbar__suggestions a{display:block;padding:0.5em;font-size:0.9em}.searchbar__suggestions a:hover,.searchbar__suggestions a:active,.searchbar__suggestions a:focus{background:#e0e0e0}.searchbar__suggestions code{margin-right:.5em}@media (min-width: 801px){.sidebar{position:fixed;top:0;bottom:0;left:0;overflow:auto;box-shadow:1px 0 1.5px rgba(0,0,0,0.12);width:280px;z-index:2;border-right:1px solid #e0e0e0;transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}@media (max-width: 800px){.sidebar{margin-top:4em}}.sidebar__annotation{color:#5c4863}.sidebar__item{font-size:0.9em}.sidebar__item a{padding:0.5em 4.5em;display:block;text-decoration:none;color:#333}.sidebar__item:hover,.sidebar__item:active,.sidebar__item:focus{background:#e0e0e0}.sidebar__item.is-collapsed+*{display:none}.sidebar__item--heading{padding:1em 1.5em}.sidebar__item--heading a{font-weight:bold}.sidebar__item--sub-heading{padding:0.5em 2.5em}.sidebar__item--sub-heading a{color:#888}.sidebar__item--heading,.sidebar__item--sub-heading{position:relative}.sidebar__item--heading:after,.sidebar__item--sub-heading:after{position:absolute;top:50%;right:2em;content:'\25BC';margin-top:-0.5em;color:#ddd;font-size:0.7em}.sidebar__item--heading.is-collapsed:after,.sidebar__item--sub-heading.is-collapsed:after{content:'\25B6'}.sidebar__item--heading a,.sidebar__item--sub-heading a{padding:0;display:inline}.sidebar__description{color:#e0e0e0;padding-right:2em}.sidebar__header{border-bottom:1px solid #e0e0e0}.sidebar__title{font-size:1em;margin:0;padding:1.45em}.btn-toggle{background:#EFEFEF;border:none;border-bottom:1px solid #e0e0e0;display:block;padding:1em;width:100%;cursor:pointer;color:#999;font-weight:bold;margin:0;transition:0.15s ease-out}.btn-toggle:hover,.btn-toggle:active,.btn-toggle:focus{background:#DFDFDF}.main{background:#f9f9f9;position:relative}@media (min-width: 801px){.main{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1);padding-left:280px;padding-top:4em;min-height:45em}}.main__section{margin-top:5em;border-top:5px solid rgba(92,72,99,0.2)}.header+.main__section{margin-top:0;border-top:none}.main__heading,.main__heading--secondary{padding:1em 0;margin-top:0}@media (min-width: 801px){.main__heading,.main__heading--secondary{padding:2em 0 0}}.main__heading{color:#5c4863;font-size:3.5em;text-align:center;border-bottom:5px solid rgba(92,72,99,0.2);padding-bottom:.5em;margin-bottom:1em;background:rgba(92,72,99,0.1)}.main__heading--secondary{font-size:3em;color:#dd5a6f;text-transform:uppercase;font-weight:bold;padding-top:0;margin-bottom:-3rem;position:relative}.main__heading--secondary .container{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.main__heading--secondary::before{content:'';position:absolute;left:0;right:0;bottom:0.15em;height:0.2em;background-color:#dd5a6f}.main__description{margin-bottom:1.5rem}.footer{background:#e0e0e0;padding:1em 0}.footer .container{position:relative}.footer__project-info{float:left}.footer__watermark{position:absolute;right:0;top:-0.7em}.footer__watermark img{display:block;max-width:7em}.project-info__name,.project-info__version,.project-info__license{display:inline-block}.project-info__version,.project-info__license{color:#555}.project-info__license{text-indent:-0.25em}.main__section{margin-bottom:4.5rem}.item__heading{color:#333;margin:4.5rem 0 1.5rem 0;position:relative;font-size:2em;font-weight:300;float:left}.item__name{color:#dd5a6f}.item__example{margin-bottom:1.5rem}.item__example,.item__code{box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;word-wrap:break-word;line-height:1.42}.item__code{padding-right:7em;clear:both;cursor:pointer}.item__code--togglable::after{position:absolute;right:0;bottom:-2.5em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;color:#c4c4c4;font-size:0.8em;transition:0.2s ease-out}.item__code--togglable:hover::after,.item__code--togglable:active::after,.item__code--togglable:focus::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}.item__code--togglable[data-current-state='expanded']::after{content:'Click to collapse.'}.item__code--togglable[data-current-state='collapsed']::after{content:'Click to expand.'}.example__description{padding:1em;background:#EFEFEF}.example__description p{margin:0}.example__code[class*='language-']{margin:0}.item__anchor{font-size:0.6em;color:#eeafb9}@media (min-width: 801px){.item__anchor{position:absolute;right:101%;bottom:.25em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0}.item:hover .item__anchor{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}}.item__deprecated{display:inline-block;overflow:hidden;margin-top:5.5em;margin-left:1em}.item__deprecated strong{float:left;color:#c00;text-transform:uppercase}.item__deprecated p{float:left;margin:0;padding-left:0.5em}.item__type{color:#ddd;text-transform:capitalize;font-size:0.75em}.item__alias,.item__aliased{color:#ddd;font-size:0.8em}.item__sub-heading{color:#333;margin-top:0;margin-bottom:1.5rem;font-size:1.2em}.item__parameters{width:100%;margin-bottom:1em;border-collapse:collapse}.item__parameters thead th{vertical-align:bottom;border-bottom:2px solid #ddd;border-top:none;text-align:left;color:#707070}.item__parameters tbody th{text-align:left}.item__parameters td,.item__parameters th{padding:0.5em 0.5em 0.5em 0;vertical-align:top}@media (min-width: 801px){tbody>.item__parameter:first-of-type>td{border-top:none}.item__parameters td,.item__parameters th{border-top:1px solid #ddd}}.item__access{text-transform:capitalize;color:#5c4863;font-size:0.8em}.item__since{float:right;padding-top:0.9em;color:#c4c4c4;margin-bottom:1em}.item__source-link{position:absolute;top:1px;right:1px;background:white;padding:1em;z-index:2;color:#c4c4c4}.item__cross-type{color:#4d4d4d;font-family:'Consolas', 'Monaco', 'Andale Mono', monospace;font-size:0.8em}.item__description{margin-bottom:1.5rem}li.item__description{margin-bottom:0}.item__description--inline>*{display:inline-block;margin:0}.item__code-wrapper{position:relative;clear:both;margin-bottom:1.5rem}.color-preview--inline{padding:2px 4px;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.color-preview--block{width:2em;height:2em;position:absolute;top:140%;right:0;top:calc(100% + 20px);border:1px solid rgba(0,0,0,0.1);border-radius:3px}
diff --git a/themes/mytheme/sassdoc/assets/images/favicon.png b/themes/mytheme/sassdoc/assets/images/favicon.png
new file mode 100644
index 0000000..585fb53
Binary files /dev/null and b/themes/mytheme/sassdoc/assets/images/favicon.png differ
diff --git a/themes/mytheme/sassdoc/assets/images/logo_full_compact.svg b/themes/mytheme/sassdoc/assets/images/logo_full_compact.svg
new file mode 100644
index 0000000..0f590c9
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/images/logo_full_compact.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="431.5" height="431.5" viewBox="0 0 431.5 431.5"><path fill="#DD5A6F" d="M40 0h351.5c22.092 0 40 17.908 40 40v351.5c0 22.092-17.908 40-40 40h-351.5c-22.091 0-40-17.908-40-40v-351.5c0-22.092 17.909-40 40-40z"/><path fill="#fff" d="M57.265 158.555c-.387 1.16-.822 2.32-1.305 3.48s-1.04 2.175-1.668 3.045-1.33 1.521-2.102 1.957c-.773.436-1.595.508-2.465.218-1.16-.193-1.812-1.04-1.958-2.537-.145-1.5.025-2.973.508-4.423.677-2.32 1.667-5.39 2.973-9.207 1.305-3.82 2.803-8 4.495-12.543 1.69-4.543 3.48-9.256 5.364-14.137 1.886-4.882 3.698-9.546 5.438-13.993 1.74-4.447 3.335-8.482 4.785-12.108 1.45-3.625 2.562-6.452 3.335-8.481.29-.58.725-1.063 1.305-1.45s1.184-.58 1.813-.58c.628 0 1.256.193 1.885.58.628.387 1.135 1.015 1.522 1.885.773 2.03.822 4.013.145 5.945-.677 1.547-1.643 3.939-2.9 7.177-1.257 3.24-2.682 6.888-4.278 10.948-1.595 4.06-3.262 8.362-5.002 12.905-1.74 4.543-3.383 8.87-4.93 12.978-1.547 4.108-2.948 7.805-4.205 11.092s-2.175 5.702-2.755 7.249zm77.285-36.395c-1.933-1.45-4.036-2.997-6.308-4.641-2.27-1.643-4.664-3.335-7.177-5.074 1.643 5.896 3.383 11.503 5.22 16.819.29 1.16.17 2.176-.362 3.045-.532.87-1.185 1.306-1.958 1.306-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.682-3.48-.387-.869-.87-2.271-1.45-4.204-.58-1.934-1.257-4.205-2.03-6.815-1.643 2.417-3.166 4.785-4.567 7.105-1.402 2.319-2.73 4.543-3.988 6.67-.773 1.062-1.643 1.667-2.61 1.812-.967.146-1.692-.073-2.175-.653-.677-1.062-1.087-2.439-1.233-4.132-.145-1.691.12-3.118.798-4.277.483-.773 1.353-2.176 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.03.483-4.012.99-5.945 1.522-1.933.531-3.867 1.04-5.8 1.522-1.16.193-2.175 0-3.045-.58s-1.257-1.257-1.16-2.029c.29-1.258.942-2.393 1.957-3.407 1.016-1.017 2.2-1.716 3.553-2.104.967-.29 2.537-.699 4.712-1.232 2.176-.53 4.665-1.135 7.468-1.812-1.933-1.16-3.842-2.344-5.727-3.552-1.886-1.21-3.795-2.345-5.728-3.408-1.063-.677-1.667-1.547-1.813-2.609-.145-1.063.073-1.837.653-2.32 1.063-.677 2.344-.99 3.843-.942 1.498.048 2.827.46 3.987 1.232.967.482 2.32 1.305 4.06 2.465-.29-1.643-.532-3.214-.725-4.712-.193-1.5-.338-2.925-.435-4.278-.097-1.062.145-1.981.725-2.755.58-.772 1.257-1.208 2.03-1.305.677-.193 1.498.023 2.465.653.967.628 1.692 1.812 2.175 3.552.387 1.837.822 3.722 1.305 5.654.483 1.934.967 4.013 1.45 6.235 1.933-2.61 3.818-5.075 5.655-7.395 1.837-2.32 3.577-4.303 5.22-5.945.773-.773 1.643-1.208 2.61-1.305.967-.098 1.74.145 2.32.725.483.387.846 1.16 1.088 2.32.24 1.16-.17 2.465-1.233 3.915-1.063 1.449-2.272 3.069-3.625 4.857s-2.755 3.697-4.205 5.728c2.513-.483 4.978-.847 7.395-1.088 2.417-.24 4.688-.41 6.815-.508 1.063 0 1.982.193 2.755.58.773.388 1.208.968 1.305 1.74.097.677-.193 1.498-.87 2.465-.677.968-1.885 1.596-3.625 1.886-1.643.289-3.407.579-5.292.869-1.886.29-3.795.628-5.728 1.016 2.223 1.643 4.302 3.262 6.235 4.857 1.933 1.596 3.722 3.117 5.365 4.567.773.773 1.28 1.57 1.523 2.392.24.822.12 1.57-.363 2.248-.483.483-1.305.822-2.465 1.016-1.16.192-2.417-.194-3.77-1.161zm58.87 0c-1.933-1.45-4.036-2.997-6.307-4.641-2.272-1.643-4.665-3.335-7.178-5.074 1.643 5.896 3.383 11.503 5.22 16.819.29 1.16.17 2.176-.363 3.045-.53.87-1.184 1.306-1.957 1.306-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.682-3.48-.387-.869-.87-2.271-1.45-4.204-.58-1.934-1.257-4.205-2.03-6.815-1.643 2.417-3.166 4.785-4.568 7.105-1.4 2.319-2.73 4.543-3.987 6.67-.773 1.062-1.643 1.667-2.61 1.812s-1.692-.073-2.175-.653c-.677-1.062-1.087-2.439-1.233-4.132-.145-1.691.12-3.118.798-4.277.483-.773 1.353-2.176 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.03.483-4.012.99-5.945 1.522-1.933.531-3.867 1.04-5.8 1.522-1.16.193-2.175 0-3.045-.58-.87-.58-1.257-1.257-1.16-2.029.29-1.258.942-2.393 1.958-3.407 1.015-1.017 2.2-1.716 3.552-2.104.967-.29 2.537-.699 4.712-1.232 2.176-.53 4.665-1.135 7.468-1.812-1.933-1.16-3.842-2.344-5.727-3.552-1.886-1.21-3.795-2.345-5.728-3.408-1.063-.677-1.667-1.547-1.813-2.609-.145-1.063.073-1.837.653-2.32 1.063-.677 2.344-.99 3.843-.942 1.498.048 2.827.46 3.987 1.232.967.482 2.32 1.305 4.06 2.465-.29-1.643-.532-3.214-.725-4.712-.193-1.5-.338-2.925-.435-4.278-.097-1.062.145-1.981.725-2.755.58-.772 1.257-1.208 2.03-1.305.677-.193 1.498.023 2.465.653.967.628 1.692 1.812 2.175 3.552.387 1.837.822 3.722 1.305 5.654.483 1.934.967 4.013 1.45 6.235 1.933-2.61 3.818-5.075 5.655-7.395 1.837-2.32 3.577-4.303 5.22-5.945.773-.773 1.643-1.208 2.61-1.305.967-.098 1.74.145 2.32.725.483.387.846 1.16 1.087 2.32.242 1.16-.17 2.465-1.232 3.915-1.062 1.449-2.271 3.069-3.625 4.857-1.353 1.788-2.755 3.697-4.205 5.728 2.513-.483 4.978-.847 7.395-1.088 2.417-.24 4.688-.41 6.815-.508 1.063 0 1.982.193 2.755.58.773.388 1.208.968 1.305 1.74.097.677-.193 1.498-.87 2.465-.677.968-1.885 1.596-3.625 1.886-1.643.289-3.407.579-5.292.869-1.886.29-3.795.628-5.728 1.016 2.223 1.643 4.302 3.262 6.235 4.857s3.722 3.117 5.365 4.567c.773.773 1.28 1.57 1.523 2.392.24.822.12 1.57-.363 2.248-.483.483-1.305.822-2.465 1.016-1.16.192-2.417-.194-3.77-1.161zm-70.79 224.59c28.288 0 48.008-17.952 48.008-45.424 0-27.2-19.72-45.288-48.144-45.288h-35.768v90.712h35.904zm-.136-17h-16.456v-56.712h16.592c18.496 0 28.288 12.376 28.288 28.288 0 15.504-10.472 28.424-28.424 28.424zm104.992 18.632c27.336 0 47.328-19.584 47.328-46.92s-19.992-46.92-47.328-46.92c-27.472 0-47.464 19.584-47.464 46.92s19.992 46.92 47.464 46.92zm0-17.136c-16.864 0-27.608-12.92-27.608-29.784 0-17 10.744-29.784 27.608-29.784 16.728 0 27.472 12.784 27.472 29.784 0 16.864-10.744 29.784-27.472 29.784zm104.992 17.136c19.856 0 31.416-11.016 37.809-22.304l-16.592-8.024c-3.809 7.345-11.969 13.192-21.217 13.192-16.592 0-28.56-12.648-28.56-29.784s11.968-29.784 28.56-29.784c9.248 0 17.408 5.849 21.217 13.192l16.592-8.16c-6.393-11.424-17.952-22.168-37.808-22.168-27.337 0-48.416 18.904-48.416 46.92-.001 27.88 21.079 46.92 48.415 46.92zm-220.628-109.76c18.876 0 28.236-9.984 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.729 18.72-13.729 9.984 0 18.096 4.057 22.464 9.984l4.524-5.771c-5.46-6.084-14.04-11.076-26.988-11.076-17.004 0-26.832 9.359-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.488 8.424 16.848 12.012 29.016 12.012zm105.144-1.872v-53.04c0-16.848-12.168-24.18-27.456-24.18-12.48 0-21.216 4.212-29.016 12.636l4.524 5.616c6.864-7.8 14.196-11.076 23.712-11.076 11.076 0 20.124 6.084 20.124 17.316v15.287c-6.552-7.332-15.132-10.764-25.584-10.764-13.104 0-26.364 8.58-26.364 24.96 0 16.225 13.416 25.116 26.364 25.116 10.452 0 18.876-3.432 25.584-10.764v8.893h8.112zm-30.888-4.524c-12.324 0-20.592-7.956-20.592-18.563 0-10.764 8.268-18.72 20.592-18.72 9.048 0 17.472 3.432 22.776 10.451v16.536c-5.304 6.864-13.728 10.296-22.776 10.296zm78.624 6.396c18.876 0 28.235-9.984 28.235-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.021-13.729 18.72-13.729 9.984 0 18.097 4.057 22.464 9.984l4.524-5.771c-5.46-6.084-14.04-11.076-26.988-11.076-17.004 0-26.832 9.359-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.607 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.489 8.424 16.849 12.012 29.017 12.012zm71.604 0c18.876 0 28.236-9.984 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.729 18.72-13.729 9.983 0 18.096 4.057 22.464 9.984l4.523-5.771c-5.46-6.084-14.039-11.076-26.987-11.076-17.004 0-26.832 9.359-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.488 8.424 16.848 12.012 29.016 12.012z"/></svg>
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/images/logo_full_inline.svg b/themes/mytheme/sassdoc/assets/images/logo_full_inline.svg
new file mode 100644
index 0000000..68b0103
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/images/logo_full_inline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="792" height="296.75" viewBox="0 0 792 296.75"><path fill="#DD5A6F" d="M40 0h712c22.092 0 40 17.908 40 40v216.75c0 22.092-17.908 40-40 40h-712c-22.092 0-40-17.908-40-40v-216.75c0-22.092 17.908-40 40-40z"/><path fill="#fff" d="M159.85 217.372c18.876 0 28.236-9.984 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.729 18.72-13.729 9.984 0 18.097 4.057 22.464 9.984l4.524-5.771c-5.46-6.084-14.04-11.076-26.988-11.076-17.004 0-26.832 9.359-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.607 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.488 8.424 16.848 12.012 29.016 12.012zm105.144-1.872v-53.04c0-16.848-12.168-24.18-27.456-24.18-12.48 0-21.216 4.212-29.016 12.636l4.523 5.616c6.864-7.8 14.196-11.076 23.712-11.076 11.076 0 20.124 6.084 20.124 17.316v15.287c-6.552-7.332-15.132-10.764-25.584-10.764-13.104 0-26.364 8.58-26.364 24.96 0 16.225 13.416 25.116 26.364 25.116 10.452 0 18.876-3.432 25.584-10.764v8.892h8.113v.001zm-30.888-4.524c-12.324 0-20.593-7.956-20.593-18.563 0-10.764 8.269-18.72 20.593-18.72 9.048 0 17.472 3.432 22.775 10.451v16.536c-5.303 6.864-13.727 10.296-22.775 10.296zm78.624 6.396c18.875 0 28.235-9.984 28.235-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.021-13.729 18.72-13.729 9.984 0 18.097 4.057 22.464 9.984l4.524-5.771c-5.46-6.084-14.04-11.076-26.988-11.076-17.004 0-26.832 9.359-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.607 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.489 8.424 16.849 12.012 29.017 12.012zm71.604 0c18.876 0 28.236-9.984 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.729 18.72-13.729 9.983 0 18.096 4.057 22.464 9.984l4.523-5.771c-5.459-6.084-14.039-11.076-26.987-11.076-17.004 0-26.832 9.359-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.488 8.424 16.848 12.012 29.016 12.012zm-279.07-79.067c-.386 1.16-.819 2.32-1.304 3.48-.483 1.16-1.04 2.175-1.667 3.045-.63.87-1.33 1.521-2.103 1.957-.773.436-1.596.508-2.466.218-1.159-.193-1.812-1.04-1.957-2.537-.146-1.5.024-2.973.508-4.423.677-2.32 1.667-5.39 2.972-9.207 1.306-3.82 2.804-8 4.496-12.543 1.689-4.543 3.479-9.256 5.365-14.138 1.885-4.88 3.696-9.545 5.437-13.992s3.335-8.482 4.785-12.108c1.45-3.625 2.562-6.451 3.335-8.481.29-.58.725-1.063 1.305-1.45s1.185-.58 1.813-.58c.628 0 1.256.193 1.885.58.628.387 1.135 1.015 1.522 1.885.772 2.03.821 4.013.145 5.945-.677 1.547-1.643 3.939-2.9 7.177-1.257 3.24-2.682 6.888-4.277 10.948-1.595 4.06-3.263 8.362-5.002 12.905-1.74 4.543-3.383 8.87-4.931 12.978-1.547 4.108-2.947 7.805-4.205 11.092-1.257 3.286-2.175 5.702-2.756 7.249zm77.286-36.395c-1.933-1.45-4.036-2.997-6.308-4.641-2.271-1.643-4.664-3.335-7.177-5.074 1.643 5.896 3.383 11.503 5.22 16.819.29 1.16.17 2.176-.362 3.045-.532.87-1.185 1.306-1.958 1.306-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.682-3.48-.388-.869-.87-2.271-1.45-4.204-.58-1.934-1.257-4.205-2.03-6.815-1.643 2.417-3.166 4.785-4.567 7.105-1.401 2.319-2.729 4.543-3.987 6.67-.773 1.062-1.644 1.667-2.61 1.812s-1.691-.073-2.175-.653c-.677-1.062-1.087-2.439-1.233-4.133-.145-1.689.12-3.117.798-4.276.483-.773 1.354-2.176 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.029.483-4.012.99-5.944 1.522-1.934.531-3.867 1.04-5.8 1.522-1.16.193-2.176 0-3.046-.58-.869-.58-1.257-1.257-1.159-2.029.29-1.258.941-2.393 1.957-3.407 1.016-1.017 2.199-1.716 3.553-2.104.967-.29 2.537-.699 4.713-1.232 2.175-.53 4.664-1.135 7.467-1.812-1.933-1.16-3.842-2.344-5.728-3.552-1.885-1.21-3.794-2.345-5.728-3.408-1.062-.677-1.667-1.547-1.812-2.609-.146-1.063.073-1.837.652-2.32 1.063-.677 2.345-.99 3.844-.942 1.498.048 2.827.46 3.986 1.232.968.482 2.32 1.305 4.061 2.465-.29-1.643-.532-3.214-.726-4.712-.192-1.5-.338-2.925-.435-4.278-.097-1.062.145-1.981.725-2.755.58-.772 1.257-1.208 2.03-1.305.677-.193 1.498.023 2.465.653.967.628 1.692 1.812 2.175 3.552.388 1.837.822 3.722 1.306 5.654.482 1.934.967 4.013 1.449 6.235 1.934-2.61 3.818-5.075 5.655-7.395 1.837-2.32 3.577-4.303 5.22-5.945.773-.773 1.644-1.208 2.61-1.305.967-.098 1.74.145 2.32.725.482.387.846 1.16 1.088 2.32.24 1.16-.17 2.465-1.233 3.915-1.062 1.449-2.271 3.069-3.625 4.857-1.353 1.788-2.755 3.697-4.205 5.728 2.514-.483 4.979-.847 7.396-1.088 2.417-.24 4.688-.41 6.815-.508 1.062 0 1.981.193 2.755.58.772.388 1.208.968 1.305 1.74.097.677-.193 1.498-.87 2.465s-1.885 1.596-3.625 1.886c-1.643.289-3.407.579-5.292.869-1.886.29-3.795.628-5.728 1.016 2.223 1.643 4.302 3.262 6.234 4.857 1.934 1.596 3.723 3.117 5.365 4.567.773.773 1.28 1.57 1.523 2.392.239.822.119 1.57-.363 2.248-.483.483-1.305.822-2.465 1.016-1.161.192-2.418-.194-3.771-1.161zm58.87 0c-1.933-1.45-4.036-2.997-6.307-4.641-2.272-1.643-4.665-3.335-7.179-5.074 1.644 5.896 3.384 11.503 5.221 16.819.29 1.16.17 2.176-.363 3.045-.53.87-1.184 1.306-1.957 1.306-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.683-3.48-.387-.869-.869-2.271-1.449-4.204-.58-1.934-1.257-4.205-2.03-6.815-1.643 2.417-3.166 4.785-4.568 7.105-1.399 2.319-2.729 4.543-3.986 6.67-.773 1.062-1.644 1.667-2.61 1.812s-1.692-.073-2.175-.653c-.678-1.062-1.087-2.439-1.233-4.133-.145-1.689.12-3.117.798-4.276.483-.773 1.354-2.176 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.029.483-4.012.99-5.944 1.522-1.934.531-3.867 1.04-5.801 1.522-1.159.193-2.175 0-3.045-.58s-1.257-1.257-1.159-2.029c.289-1.258.941-2.393 1.957-3.407 1.016-1.017 2.2-1.716 3.553-2.104.967-.29 2.537-.699 4.712-1.232 2.176-.53 4.665-1.135 7.468-1.812-1.933-1.16-3.842-2.344-5.727-3.552-1.887-1.21-3.795-2.345-5.729-3.408-1.062-.677-1.667-1.547-1.812-2.609-.146-1.063.072-1.837.652-2.32 1.063-.677 2.345-.99 3.844-.942 1.498.048 2.826.46 3.986 1.232.967.482 2.32 1.305 4.061 2.465-.29-1.643-.532-3.214-.726-4.712-.192-1.5-.338-2.925-.435-4.278-.098-1.062.145-1.981.725-2.755.58-.772 1.257-1.208 2.03-1.305.677-.193 1.498.023 2.465.653.967.628 1.692 1.812 2.175 3.552.388 1.837.822 3.722 1.306 5.654.482 1.934.967 4.013 1.449 6.235 1.934-2.61 3.818-5.075 5.655-7.395 1.837-2.32 3.577-4.303 5.22-5.945.773-.773 1.644-1.208 2.61-1.305.967-.098 1.74.145 2.32.725.482.387.846 1.16 1.087 2.32.242 1.16-.17 2.465-1.232 3.915-1.062 1.449-2.271 3.069-3.625 4.857-1.353 1.788-2.755 3.697-4.205 5.728 2.514-.483 4.979-.847 7.396-1.088 2.417-.24 4.688-.41 6.814-.508 1.063 0 1.982.193 2.756.58.772.388 1.207.968 1.305 1.74.097.677-.193 1.498-.87 2.465s-1.885 1.596-3.625 1.886c-1.644.289-3.407.579-5.292.869-1.886.29-3.795.628-5.729 1.016 2.224 1.643 4.303 3.262 6.235 4.857s3.722 3.117 5.365 4.567c.772.773 1.28 1.57 1.522 2.392.24.822.12 1.57-.362 2.248-.483.483-1.306.822-2.465 1.016-1.161.192-2.418-.194-3.771-1.161zm221.59 116.59c25.376 0 43.066-16.104 43.066-40.748 0-24.4-17.69-40.626-43.188-40.626h-32.086v81.374h32.208zm-.122-15.25h-14.762v-50.874h14.884c16.592 0 25.376 11.102 25.376 25.376 0 13.908-9.394 25.498-25.498 25.498zm94.184 16.714c24.521 0 42.456-17.567 42.456-42.09s-17.935-42.09-42.456-42.09c-24.645 0-42.578 17.567-42.578 42.09s17.934 42.09 42.578 42.09zm0-15.372c-15.128 0-24.767-11.59-24.767-26.718 0-15.25 9.639-26.718 24.767-26.718 15.006 0 24.644 11.468 24.644 26.718 0 15.128-9.638 26.718-24.644 26.718zm94.184 15.372c17.812 0 28.182-9.882 33.916-20.008l-14.884-7.198c-3.416 6.588-10.736 11.834-19.032 11.834-14.884 0-25.62-11.346-25.62-26.718s10.736-26.718 25.62-26.718c8.296 0 15.616 5.246 19.032 11.834l14.884-7.32c-5.734-10.248-16.104-19.886-33.916-19.886-24.521 0-43.432 16.958-43.432 42.09 0 25.01 18.91 42.09 43.432 42.09z"/></svg>
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/images/logo_light_compact.svg b/themes/mytheme/sassdoc/assets/images/logo_light_compact.svg
new file mode 100644
index 0000000..7f9ef80
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/images/logo_light_compact.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="431.5" height="431.5" viewBox="0 0 431.5 431.5"><path fill="#5C4863" d="M112.1 231.372c18.876 0 28.236-9.983 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.728 18.72-13.728 9.984 0 18.096 4.056 22.464 9.984l4.524-5.772c-5.46-6.084-14.04-11.076-26.988-11.076-17.004 0-26.832 9.36-26.832 20.904 0 27.144 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.836 5.928c7.488 8.424 16.848 12.012 29.016 12.012zm105.144-1.872v-53.04c0-16.848-12.168-24.18-27.456-24.18-12.48 0-21.216 4.212-29.016 12.636l4.524 5.616c6.864-7.8 14.196-11.076 23.712-11.076 11.076 0 20.124 6.084 20.124 17.316v15.288c-6.552-7.332-15.132-10.764-25.584-10.764-13.104 0-26.364 8.58-26.364 24.96 0 16.225 13.416 25.116 26.364 25.116 10.452 0 18.876-3.433 25.584-10.765v8.893h8.112zm-30.888-4.523c-12.324 0-20.592-7.957-20.592-18.564 0-10.764 8.268-18.72 20.592-18.72 9.048 0 17.472 3.432 22.776 10.452v16.536c-5.304 6.863-13.728 10.296-22.776 10.296zm78.624 6.395c18.876 0 28.235-9.983 28.235-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.728 18.72-13.728 9.984 0 18.097 4.056 22.464 9.984l4.524-5.772c-5.46-6.084-14.04-11.076-26.988-11.076-17.004 0-26.832 9.36-26.832 20.904 0 27.144 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.607 0-19.5-4.992-24.336-11.076l-4.836 5.928c7.489 8.424 16.849 12.012 29.017 12.012zm71.604 0c18.876 0 28.236-9.983 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.728 18.72-13.728 9.983 0 18.096 4.056 22.464 9.984l4.523-5.772c-5.46-6.084-14.039-11.076-26.987-11.076-17.004 0-26.832 9.36-26.832 20.904 0 27.144 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.836 5.928c7.488 8.424 16.848 12.012 29.016 12.012zm-213.704 115.128c28.288 0 48.008-17.952 48.008-45.424 0-27.2-19.72-45.288-48.144-45.288h-35.768v90.712h35.904zm-.136-17h-16.456v-56.712h16.592c18.496 0 28.288 12.376 28.288 28.288 0 15.504-10.472 28.424-28.424 28.424zm104.992 18.632c27.336 0 47.328-19.584 47.328-46.92s-19.992-46.92-47.328-46.92c-27.472 0-47.464 19.584-47.464 46.92s19.992 46.92 47.464 46.92zm0-17.136c-16.864 0-27.608-12.92-27.608-29.784 0-17 10.744-29.784 27.608-29.784 16.728 0 27.472 12.784 27.472 29.784 0 16.864-10.744 29.784-27.472 29.784zm104.993 17.136c19.855 0 31.416-11.016 37.808-22.304l-16.592-8.024c-3.809 7.345-11.969 13.192-21.216 13.192-16.593 0-28.561-12.648-28.561-29.784s11.968-29.784 28.561-29.784c9.247 0 17.407 5.848 21.216 13.192l16.592-8.16c-6.393-11.424-17.952-22.168-37.808-22.168-27.337 0-48.416 18.903-48.416 46.92-.001 27.88 21.079 46.92 48.416 46.92z"/><path fill="#DD5A6F" d="M57.515 152.305c-.387 1.16-.822 2.32-1.305 3.48-.483 1.16-1.04 2.175-1.668 3.045s-1.33 1.522-2.102 1.957c-.773.436-1.595.508-2.465.218-1.16-.193-1.812-1.04-1.958-2.538-.145-1.498.025-2.972.508-4.422.677-2.32 1.667-5.39 2.972-9.208 1.306-3.818 2.804-8 4.495-12.542 1.692-4.543 3.48-9.256 5.365-14.138 1.886-4.88 3.698-9.545 5.438-13.992 1.74-4.447 3.335-8.482 4.785-12.108 1.45-3.625 2.562-6.452 3.335-8.482.29-.58.725-1.063 1.305-1.45s1.184-.58 1.813-.58c.628 0 1.256.193 1.885.58.628.387 1.135 1.015 1.522 1.885.773 2.03.822 4.012.145 5.945-.677 1.547-1.643 3.94-2.9 7.177-1.257 3.24-2.682 6.888-4.277 10.948-1.596 4.06-3.263 8.362-5.003 12.905-1.74 4.543-3.383 8.87-4.93 12.977-1.547 4.11-2.948 7.806-4.205 11.093-1.257 3.287-2.175 5.703-2.755 7.25zm77.285-36.395c-1.933-1.45-4.036-2.997-6.308-4.64-2.27-1.643-4.664-3.335-7.177-5.075 1.643 5.897 3.383 11.503 5.22 16.82.29 1.16.17 2.175-.363 3.045-.53.87-1.184 1.305-1.957 1.305-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.682-3.48-.387-.87-.87-2.272-1.45-4.205-.58-1.933-1.257-4.205-2.03-6.815-1.643 2.417-3.166 4.785-4.568 7.105-1.4 2.32-2.73 4.543-3.987 6.67-.773 1.063-1.643 1.667-2.61 1.812-.967.146-1.692-.072-2.175-.652-.677-1.063-1.087-2.44-1.233-4.133-.145-1.69.12-3.117.798-4.277.483-.773 1.353-2.175 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.03.483-4.012.99-5.945 1.522-1.933.532-3.867 1.04-5.8 1.523-1.16.193-2.175 0-3.045-.58-.87-.58-1.257-1.257-1.16-2.03.29-1.257.942-2.392 1.957-3.407 1.016-1.016 2.2-1.716 3.553-2.103.967-.29 2.537-.7 4.712-1.232 2.176-.532 4.665-1.136 7.468-1.813-1.933-1.16-3.842-2.344-5.728-3.552-1.885-1.21-3.794-2.345-5.727-3.408-1.063-.677-1.667-1.547-1.813-2.61-.145-1.063.073-1.837.653-2.32 1.063-.677 2.344-.99 3.842-.942 1.5.048 2.828.46 3.988 1.232.967.483 2.32 1.305 4.06 2.465-.29-1.643-.532-3.214-.725-4.712-.193-1.5-.338-2.925-.435-4.278-.097-1.063.145-1.982.725-2.755s1.257-1.208 2.03-1.305c.677-.193 1.498.024 2.465.653.967.628 1.692 1.812 2.175 3.552.387 1.837.822 3.722 1.305 5.655.483 1.933.967 4.012 1.45 6.235 1.933-2.61 3.818-5.075 5.655-7.395 1.837-2.32 3.577-4.302 5.22-5.945.773-.773 1.643-1.208 2.61-1.305.967-.097 1.74.145 2.32.725.483.387.846 1.16 1.087 2.32.242 1.16-.17 2.465-1.232 3.915-1.063 1.45-2.272 3.07-3.625 4.858-1.353 1.788-2.755 3.697-4.205 5.727 2.513-.483 4.978-.846 7.395-1.087 2.417-.242 4.688-.41 6.815-.508 1.063 0 1.982.193 2.755.58.773.387 1.208.967 1.305 1.74.097.677-.193 1.498-.87 2.465-.677.967-1.885 1.595-3.625 1.885-1.643.29-3.407.58-5.293.87-1.885.29-3.794.628-5.727 1.015 2.223 1.643 4.302 3.262 6.235 4.858 1.933 1.595 3.722 3.117 5.365 4.567.773.773 1.28 1.57 1.522 2.393.242.82.12 1.57-.362 2.247-.483.483-1.305.822-2.465 1.015-1.16.193-2.417-.193-3.77-1.16zm58.87 0c-1.933-1.45-4.036-2.997-6.308-4.64-2.27-1.643-4.664-3.335-7.177-5.075 1.643 5.897 3.383 11.503 5.22 16.82.29 1.16.17 2.175-.363 3.045-.53.87-1.184 1.305-1.957 1.305-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.682-3.48-.387-.87-.87-2.272-1.45-4.205s-1.257-4.205-2.03-6.815c-1.643 2.417-3.166 4.785-4.568 7.105-1.4 2.32-2.73 4.543-3.987 6.67-.773 1.063-1.643 1.667-2.61 1.812-.967.146-1.692-.072-2.175-.652-.677-1.063-1.087-2.44-1.233-4.133-.145-1.69.12-3.117.798-4.277.483-.773 1.353-2.175 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.03.483-4.012.99-5.945 1.522-1.933.532-3.867 1.04-5.8 1.523-1.16.193-2.175 0-3.045-.58-.87-.58-1.257-1.257-1.16-2.03.29-1.257.942-2.392 1.957-3.407 1.016-1.016 2.2-1.716 3.553-2.103.967-.29 2.537-.7 4.712-1.232 2.176-.532 4.665-1.136 7.468-1.813-1.933-1.16-3.842-2.344-5.728-3.552-1.885-1.21-3.794-2.345-5.727-3.408-1.063-.677-1.667-1.547-1.813-2.61-.145-1.063.073-1.837.653-2.32 1.063-.677 2.344-.99 3.842-.942 1.5.048 2.828.46 3.988 1.232.967.483 2.32 1.305 4.06 2.465-.29-1.643-.532-3.214-.725-4.712-.193-1.5-.338-2.925-.435-4.278-.097-1.063.145-1.982.725-2.755.58-.773 1.257-1.208 2.03-1.305.677-.193 1.498.024 2.465.653.967.628 1.692 1.812 2.175 3.552.387 1.837.822 3.722 1.305 5.655s.967 4.012 1.45 6.235c1.933-2.61 3.818-5.075 5.655-7.395 1.837-2.32 3.577-4.302 5.22-5.945.773-.773 1.643-1.208 2.61-1.305.967-.097 1.74.145 2.32.725.483.387.846 1.16 1.087 2.32.242 1.16-.17 2.465-1.232 3.915-1.063 1.45-2.272 3.07-3.625 4.858-1.353 1.788-2.755 3.697-4.205 5.727 2.513-.483 4.978-.846 7.395-1.087 2.417-.242 4.688-.41 6.815-.508 1.063 0 1.982.193 2.755.58.773.387 1.208.967 1.305 1.74.097.677-.193 1.498-.87 2.465-.677.967-1.885 1.595-3.625 1.885-1.643.29-3.407.58-5.293.87-1.885.29-3.794.628-5.727 1.015 2.223 1.643 4.302 3.262 6.235 4.858 1.933 1.595 3.722 3.117 5.365 4.567.773.773 1.28 1.57 1.522 2.393.242.82.12 1.57-.362 2.247-.483.483-1.305.822-2.465 1.015-1.16.193-2.417-.193-3.77-1.16z"/></svg>
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/images/logo_light_inline.svg b/themes/mytheme/sassdoc/assets/images/logo_light_inline.svg
new file mode 100644
index 0000000..120ffd2
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/images/logo_light_inline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="792" height="296.75" viewBox="0 0 792 296.75"><path fill="#5C4863" d="M160.1 217.372c18.876 0 28.236-9.984 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.728 18.72-13.728 9.984 0 18.096 4.056 22.464 9.983l4.524-5.772c-5.46-6.084-14.04-11.075-26.988-11.075-17.004 0-26.832 9.36-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.607 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.488 8.424 16.848 12.012 29.016 12.012zm105.144-1.872v-53.04c0-16.849-12.168-24.18-27.456-24.18-12.48 0-21.216 4.212-29.017 12.636l4.524 5.616c6.864-7.8 14.196-11.076 23.712-11.076 11.076 0 20.124 6.084 20.124 17.315v15.288c-6.552-7.332-15.132-10.764-25.584-10.764-13.104 0-26.364 8.58-26.364 24.96 0 16.225 13.416 25.116 26.364 25.116 10.452 0 18.876-3.432 25.584-10.764v8.892h8.113v.001zm-30.889-4.524c-12.323 0-20.592-7.956-20.592-18.563 0-10.764 8.269-18.72 20.592-18.72 9.049 0 17.473 3.432 22.776 10.451v16.536c-5.303 6.864-13.727 10.296-22.776 10.296zm78.625 6.396c18.875 0 28.235-9.984 28.235-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.021-13.728 18.72-13.728 9.984 0 18.096 4.056 22.464 9.983l4.524-5.772c-5.46-6.084-14.04-11.075-26.988-11.075-17.004 0-26.832 9.36-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.836 5.929c7.489 8.424 16.849 12.012 29.017 12.012zm71.604 0c18.876 0 28.236-9.984 28.236-22.152 0-29.016-47.424-17.472-47.424-36.348 0-7.8 7.02-13.728 18.72-13.728 9.983 0 18.096 4.056 22.464 9.983l4.523-5.772c-5.459-6.084-14.039-11.075-26.987-11.075-17.004 0-26.832 9.36-26.832 20.903 0 27.145 47.58 15.444 47.58 36.036 0 8.736-7.488 15.288-20.124 15.288-10.608 0-19.5-4.992-24.336-11.076l-4.837 5.929c7.489 8.424 16.849 12.012 29.017 12.012zm78.676 1.128c25.376 0 43.066-16.104 43.066-40.748 0-24.4-17.69-40.626-43.188-40.626h-32.086v81.374h32.208zm-.122-15.25h-14.762v-50.874h14.884c16.593 0 25.376 11.103 25.376 25.376 0 13.908-9.394 25.498-25.498 25.498zm94.184 16.714c24.521 0 42.456-17.567 42.456-42.09s-17.935-42.09-42.456-42.09c-24.645 0-42.578 17.567-42.578 42.09s17.934 42.09 42.578 42.09zm0-15.372c-15.128 0-24.767-11.59-24.767-26.718 0-15.25 9.639-26.718 24.767-26.718 15.006 0 24.644 11.468 24.644 26.718 0 15.128-9.638 26.718-24.644 26.718zm94.184 15.372c17.812 0 28.182-9.882 33.916-20.008l-14.884-7.198c-3.416 6.588-10.736 11.834-19.032 11.834-14.884 0-25.62-11.346-25.62-26.718s10.736-26.718 25.62-26.718c8.296 0 15.616 5.246 19.032 11.834l14.884-7.32c-5.734-10.248-16.104-19.886-33.916-19.886-24.521 0-43.432 16.958-43.432 42.09 0 25.01 18.91 42.09 43.432 42.09z"/><path fill="#DD5A6F" d="M105.515 138.305c-.387 1.16-.821 2.32-1.305 3.48s-1.04 2.175-1.668 3.045-1.33 1.521-2.102 1.957c-.773.436-1.596.508-2.466.218-1.159-.192-1.812-1.04-1.958-2.537-.145-1.5.025-2.973.509-4.423.677-2.32 1.667-5.39 2.973-9.208 1.305-3.818 2.803-8 4.495-12.542 1.689-4.543 3.479-9.256 5.365-14.138 1.885-4.88 3.696-9.545 5.437-13.992 1.74-4.447 3.335-8.482 4.785-12.108 1.45-3.625 2.562-6.452 3.335-8.482.29-.58.725-1.063 1.305-1.45s1.185-.58 1.813-.58c.628 0 1.256.193 1.885.58.628.387 1.135 1.015 1.521 1.885.773 2.03.822 4.012.146 5.945-.677 1.547-1.643 3.94-2.9 7.177-1.257 3.24-2.682 6.888-4.276 10.948-1.597 4.06-3.264 8.362-5.003 12.905-1.74 4.543-3.384 8.87-4.931 12.977-1.547 4.11-2.947 7.806-4.205 11.093-1.257 3.287-2.175 5.703-2.755 7.25zm77.285-36.395c-1.933-1.45-4.036-2.997-6.307-4.64-2.272-1.643-4.665-3.335-7.178-5.075 1.643 5.897 3.383 11.503 5.22 16.82.29 1.16.17 2.175-.362 3.045s-1.185 1.305-1.958 1.305c-1.257-.193-2.537-.773-3.843-1.74-1.305-.967-2.2-2.127-2.683-3.48-.387-.87-.869-2.272-1.449-4.205s-1.258-4.205-2.03-6.815c-1.644 2.417-3.166 4.785-4.567 7.105s-2.729 4.543-3.987 6.67c-.773 1.063-1.644 1.667-2.61 1.812-.967.146-1.692-.072-2.175-.652-.677-1.063-1.087-2.44-1.232-4.133-.146-1.69.12-3.117.797-4.277.483-.773 1.354-2.175 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.029.483-4.012.99-5.944 1.522-1.934.532-3.867 1.04-5.801 1.523-1.159.193-2.175 0-3.045-.58-.869-.58-1.257-1.257-1.159-2.03.29-1.257.941-2.392 1.958-3.407 1.015-1.016 2.199-1.716 3.552-2.103.967-.29 2.537-.7 4.713-1.232 2.175-.532 4.664-1.136 7.467-1.813-1.933-1.16-3.842-2.344-5.727-3.552-1.886-1.21-3.795-2.345-5.729-3.408-1.062-.677-1.667-1.547-1.812-2.61-.146-1.063.072-1.837.651-2.32 1.063-.677 2.345-.99 3.844-.942 1.498.048 2.827.46 3.986 1.232.968.483 2.32 1.305 4.061 2.465-.29-1.643-.532-3.214-.726-4.712-.192-1.5-.338-2.925-.435-4.278-.097-1.062.145-1.982.725-2.755s1.257-1.208 2.03-1.305c.677-.193 1.498.024 2.465.653.967.628 1.692 1.812 2.175 3.552.388 1.837.822 3.722 1.306 5.655.482 1.933.967 4.012 1.45 6.235 1.933-2.61 3.817-5.075 5.654-7.395 1.837-2.32 3.577-4.302 5.221-5.945.772-.773 1.643-1.208 2.609-1.305.967-.097 1.74.145 2.32.725.482.387.846 1.16 1.088 2.32.24 1.16-.17 2.465-1.233 3.915-1.062 1.45-2.271 3.07-3.625 4.858-1.353 1.788-2.755 3.697-4.205 5.727 2.514-.483 4.979-.846 7.396-1.088 2.417-.24 4.688-.41 6.815-.507 1.062 0 1.981.193 2.755.58.772.387 1.208.967 1.305 1.74.097.677-.193 1.498-.87 2.465-.677.967-1.885 1.595-3.625 1.885-1.643.29-3.407.58-5.292.87-1.886.29-3.795.628-5.728 1.015 2.223 1.643 4.302 3.262 6.234 4.858 1.934 1.595 3.723 3.117 5.365 4.567.773.773 1.28 1.57 1.523 2.393.239.82.119 1.57-.363 2.247-.483.483-1.305.822-2.465 1.015-1.16.193-2.417-.193-3.77-1.16zm58.87 0c-1.933-1.45-4.036-2.997-6.308-4.64-2.271-1.643-4.664-3.335-7.177-5.075 1.643 5.897 3.383 11.503 5.22 16.82.29 1.16.17 2.175-.363 3.045-.53.87-1.184 1.305-1.957 1.305-1.257-.193-2.537-.773-3.843-1.74s-2.2-2.127-2.683-3.48c-.387-.87-.87-2.272-1.449-4.205-.58-1.933-1.257-4.205-2.03-6.815-1.644 2.417-3.166 4.785-4.567 7.105s-2.729 4.543-3.987 6.67c-.773 1.063-1.644 1.667-2.61 1.812-.967.146-1.692-.072-2.175-.652-.678-1.063-1.087-2.44-1.233-4.133-.145-1.69.12-3.117.798-4.277.483-.773 1.354-2.175 2.61-4.205 1.257-2.03 2.803-4.398 4.64-7.105-2.029.483-4.012.99-5.944 1.522-1.934.532-3.867 1.04-5.801 1.523-1.159.193-2.175 0-3.045-.58-.87-.58-1.257-1.257-1.159-2.03.289-1.257.941-2.392 1.958-3.407 1.015-1.016 2.199-1.716 3.552-2.103.967-.29 2.537-.7 4.713-1.232 2.175-.532 4.664-1.136 7.467-1.813-1.933-1.16-3.842-2.344-5.727-3.552-1.887-1.21-3.795-2.345-5.729-3.408-1.062-.677-1.667-1.547-1.812-2.61-.146-1.063.071-1.837.651-2.32 1.063-.677 2.345-.99 3.844-.942 1.498.048 2.826.46 3.986 1.232.967.483 2.32 1.305 4.061 2.465-.29-1.643-.532-3.214-.726-4.712-.192-1.5-.338-2.925-.435-4.278-.097-1.062.145-1.982.725-2.755s1.257-1.208 2.03-1.305c.677-.193 1.498.024 2.465.653.967.628 1.692 1.812 2.175 3.552.388 1.837.822 3.722 1.306 5.655.482 1.933.967 4.012 1.45 6.235 1.933-2.61 3.817-5.075 5.654-7.395 1.837-2.32 3.577-4.302 5.221-5.945.772-.773 1.643-1.208 2.609-1.305.967-.097 1.74.145 2.32.725.482.387.846 1.16 1.087 2.32.242 1.16-.17 2.465-1.232 3.915-1.062 1.45-2.271 3.07-3.625 4.858-1.353 1.788-2.755 3.697-4.205 5.727 2.514-.483 4.979-.846 7.396-1.088 2.417-.24 4.688-.41 6.814-.507 1.063 0 1.982.193 2.756.58.772.387 1.207.967 1.305 1.74.097.677-.193 1.498-.87 2.465-.677.967-1.885 1.595-3.625 1.885-1.643.29-3.407.58-5.292.87-1.886.29-3.795.628-5.729 1.015 2.224 1.643 4.303 3.262 6.235 4.858 1.933 1.595 3.722 3.117 5.365 4.567.772.773 1.28 1.57 1.522 2.393.24.82.12 1.57-.362 2.247-.483.483-1.306.822-2.466 1.015-1.159.193-2.416-.193-3.769-1.16z"/></svg>
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/js/main.js b/themes/mytheme/sassdoc/assets/js/main.js
new file mode 100644
index 0000000..015842a
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/main.js
@@ -0,0 +1,56 @@
+/* global document */
+
+(function ($, global) {
+  'use strict';
+
+  // Constructor
+  var App = function (conf) {
+    this.conf = $.extend({
+      // Search module
+      search: new global.Search(),
+
+      // Sidebar module
+      sidebar: new global.Sidebar(),
+
+      // Initialisation
+      init: true
+    }, conf || {});
+
+    // Launch the module
+    if (this.conf.init !== false) {
+      this.initialize();
+    }
+  };
+
+  // Initialisation method
+  App.prototype.initialize = function () {
+    this.codePreview();
+  };
+
+  // Toggle code preview collapsed/expanded modes
+  App.prototype.codePreview = function () {
+    var $item;
+    var $code;
+    var switchTo;
+
+    $('.item__code--togglable').on('click', function () {
+      $item = $(this);
+      $code = $item.find('code');
+      switchTo = $item.attr('data-current-state') === 'expanded' ? 'collapsed' : 'expanded';
+
+      $item.attr('data-current-state', switchTo);
+      $code.html($item.attr('data-' + switchTo));
+      Prism.highlightElement($code[0]);
+    });
+  };
+
+  global.App = App;
+}(window.jQuery, window));
+
+(function ($, global) {
+
+  $(document).ready(function () {
+    var app = new global.App();
+  });
+
+}(window.jQuery, window));
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/js/main.min.js b/themes/mytheme/sassdoc/assets/js/main.min.js
new file mode 100644
index 0000000..b81f9d4
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/main.min.js
@@ -0,0 +1 @@
+!function(t){function e(t,n){this.list=t,this.options=n=n||{};var i,o,s;for(i=0,keys=["sort","includeScore","shouldSort"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=s in n?n[s]:e.defaultOptions[s];for(i=0,keys=["searchFn","sortFn","keys","getFn"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=n[s]||e.defaultOptions[s]}var n=function(t,e){if(e=e||{},this.options=e,this.options.location=e.location||n.defaultOptions.location,this.options.distance="distance"in e?e.distance:n.defaultOptions.distance,this.options.threshold="threshold"in e?e.threshold:n.defaultOptions.threshold,this.options.maxPatternLength=e.maxPatternLength||n.defaultOptions.maxPatternLength,this.pattern=e.caseSensitive?t:t.toLowerCase(),this.patternLen=t.length,this.patternLen>this.options.maxPatternLength)throw new Error("Pattern length is too long");this.matchmask=1<<this.patternLen-1,this.patternAlphabet=this._calculatePatternAlphabet()};n.defaultOptions={location:0,distance:100,threshold:.6,maxPatternLength:32},n.prototype._calculatePatternAlphabet=function(){var t={},e=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]|=1<<this.pattern.length-e-1;return t},n.prototype._bitapScore=function(t,e){var n=t/this.patternLen,i=Math.abs(this.options.location-e);return this.options.distance?n+i/this.options.distance:i?1:n},n.prototype.search=function(t){if(t=this.options.caseSensitive?t:t.toLowerCase(),this.pattern===t)return{isMatch:!0,score:0};var e,n,i,o,s,r,a,h,p,c=t.length,l=this.options.location,u=this.options.threshold,f=t.indexOf(this.pattern,l),d=this.patternLen+c,g=1,m=[];for(-1!=f&&(u=Math.min(this._bitapScore(0,f),u),f=t.lastIndexOf(this.pattern,l+this.patternLen),-1!=f&&(u=Math.min(this._bitapScore(0,f),u))),f=-1,e=0;e<this.patternLen;e++){for(i=0,o=d;o>i;)this._bitapScore(e,l+o)<=u?i=o:d=o,o=Math.floor((d-i)/2+i);for(d=o,s=Math.max(1,l-o+1),r=Math.min(l+o,c)+this.patternLen,a=Array(r+2),a[r+1]=(1<<e)-1,n=r;n>=s;n--)if(p=this.patternAlphabet[t.charAt(n-1)],a[n]=0===e?(a[n+1]<<1|1)&p:(a[n+1]<<1|1)&p|((h[n+1]|h[n])<<1|1)|h[n+1],a[n]&this.matchmask&&(g=this._bitapScore(e,n-1),u>=g)){if(u=g,f=n-1,m.push(f),!(f>l))break;s=Math.max(1,2*l-f)}if(this._bitapScore(e+1,l)>u)break;h=a}return{isMatch:f>=0,score:g}};var i={deepValue:function(t,e){for(var n=0,e=e.split("."),i=e.length;i>n;n++){if(!t)return null;t=t[e[n]]}return t}};e.defaultOptions={id:null,caseSensitive:!1,includeScore:!1,shouldSort:!0,searchFn:n,sortFn:function(t,e){return t.score-e.score},getFn:i.deepValue,keys:[]},e.prototype.search=function(t){var e,n,o,s,r,a=new this.options.searchFn(t,this.options),h=this.list,p=h.length,c=this.options,l=this.options.keys,u=l.length,f=[],d={},g=[],m=function(t,e,n){void 0!==t&&null!==t&&"string"==typeof t&&(s=a.search(t),s.isMatch&&(r=d[n],r?r.score=Math.min(r.score,s.score):(d[n]={item:e,score:s.score},f.push(d[n]))))};if("string"==typeof h[0])for(var e=0;p>e;e++)m(h[e],e,e);else for(var e=0;p>e;e++)for(o=h[e],n=0;u>n;n++)m(this.options.getFn(o,l[n]),o,e);c.shouldSort&&f.sort(c.sortFn);for(var y=c.includeScore?function(t){return f[t]}:function(t){return f[t].item},L=c.id?function(t){return i.deepValue(y(t),c.id)}:function(t){return y(t)},e=0,v=f.length;v>e;e++)g.push(L(e));return g},"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Fuse=e}(this);(function($,global){var Sidebar=function(conf){this.conf=$.extend({collapsedClass:"is-collapsed",storageKey:"_sassdoc_sidebar_index",indexAttribute:"data-slug",toggleBtn:".js-btn-toggle",init:true},conf||{});if(this.conf.init===true){this.initialize()}};Sidebar.prototype.initialize=function(){this.conf.nodes=$("["+this.conf.indexAttribute+"]");this.load();this.updateDOM();this.bind();this.loadToggle()};Sidebar.prototype.loadToggle=function(){$("<span />",{"class":"layout-toggle",html:"&times;","data-alt":"&#8594;"}).appendTo($(".header"));$(".layout-toggle").on("click",function(){var $this=$(this);var alt;$("body").toggleClass("sidebar-closed");alt=$this.html();$this.html($this.data("alt"));$this.data("alt",alt)})};Sidebar.prototype.load=function(){var index="localStorage"in global?global.localStorage.getItem(this.conf.storageKey):null;this.index=index?JSON.parse(index):this.buildIndex()};Sidebar.prototype.buildIndex=function(){var index={};var $item;this.conf.nodes.each($.proxy(function(index,item){$item=$(item);index[$item.attr(this.conf.indexAttribute)]=!$item.hasClass(this.conf.collapsedClass)},this));return index};Sidebar.prototype.updateDOM=function(){var item;for(item in this.index){if(this.index[item]===false){$("["+this.conf.indexAttribute+'="'+item+'"]').addClass(this.conf.collapsedClass)}}};Sidebar.prototype.save=function(){if(!("localStorage"in global)){return}global.localStorage.setItem(this.conf.storageKey,JSON.stringify(this.index))};Sidebar.prototype.bind=function(){var $item,slug,fn,text;var collapsed=false;global.onbeforeunload=$.proxy(function(){this.save()},this);$(this.conf.toggleBtn).on("click",$.proxy(function(event){$node=$(event.target);text=$node.attr("data-alt");$node.attr("data-alt",$node.text());$node.text(text);fn=collapsed===true?"removeClass":"addClass";this.conf.nodes.each($.proxy(function(index,item){$item=$(item);slug=$item.attr(this.conf.indexAttribute);this.index[slug]=collapsed;$("["+this.conf.indexAttribute+'="'+slug+'"]')[fn](this.conf.collapsedClass)},this));collapsed=!collapsed;this.save()},this));this.conf.nodes.on("click",$.proxy(function(event){$item=$(event.target);slug=$item.attr(this.conf.indexAttribute);this.index[slug]=!this.index[slug];$item.toggleClass(this.conf.collapsedClass)},this))};global.Sidebar=Sidebar})(window.jQuery,window);(function($,global){var Search=function(conf){this.conf=$.extend({search:{items:".sassdoc__item",input:"#js-search-input",form:"#js-search",suggestionsWrapper:"#js-search-suggestions"},fuse:{keys:["name"],threshold:.3},init:true},conf||{});if(this.conf.init===true){this.initialize()}};Search.prototype.initialize=function(){this.index=new Fuse($.map($(this.conf.search.items),function(item){var $item=$(item);return{group:$item.data("group"),name:$item.data("name"),type:$item.data("type"),node:$item}}),this.conf.fuse);this.initializeSearch()};Search.prototype.fillSuggestions=function(items){var searchSuggestions=$(this.conf.search.suggestionsWrapper);searchSuggestions.html("");var suggestions=$.map(items.slice(0,10),function(item){var $li=$("<li />",{"data-group":item.group,"data-type":item.type,"data-name":item.name,html:'<a href="#'+item.group+"-"+item.type+"-"+item.name+'"><code>'+item.type.slice(0,3)+"</code> "+item.name+"</a>"});searchSuggestions.append($li);return $li});return suggestions};Search.prototype.search=function(term){return this.fillSuggestions(this.index.search(term))};Search.prototype.initializeSearch=function(){var searchForm=$(this.conf.search.form);var searchInput=$(this.conf.search.input);var searchSuggestions=$(this.conf.search.suggestionsWrapper);var currentSelection=-1;var suggestions=[];var selected;var self=this;searchSuggestions.on("click",function(e){var target=$(event.target);if(target.nodeName==="A"){searchInput.val(target.parent().data("name"));suggestions=self.fillSuggestions([])}});searchForm.on("keyup",function(e){e.preventDefault();if(e.keyCode===13){if(selected){suggestions=self.fillSuggestions([]);searchInput.val(selected.data("name"));window.location=selected.children().first().attr("href")}e.stopPropagation()}if(e.keyCode===40){currentSelection=(currentSelection+1)%suggestions.length}if(e.keyCode===38){currentSelection=currentSelection-1;if(currentSelection<0){currentSelection=suggestions.length-1}}if(suggestions[currentSelection]){if(selected){selected.removeClass("selected")}selected=suggestions[currentSelection];selected.addClass("selected")}});searchInput.on("keyup",function(e){if(e.keyCode!==40&&e.keyCode!==38){currentSelection=-1;suggestions=self.search($(this).val())}else{e.preventDefault()}}).on("search",function(){suggestions=self.search($(this).val())})};global.Search=Search})(window.jQuery,window);(function($,global){"use strict";var App=function(conf){this.conf=$.extend({search:new global.Search,sidebar:new global.Sidebar,init:true},conf||{});if(this.conf.init!==false){this.initialize()}};App.prototype.initialize=function(){this.codePreview()};App.prototype.codePreview=function(){var $item;var $code;var switchTo;$(".item__code--togglable").on("click",function(){$item=$(this);$code=$item.find("code");switchTo=$item.attr("data-current-state")==="expanded"?"collapsed":"expanded";$item.attr("data-current-state",switchTo);$code.html($item.attr("data-"+switchTo));Prism.highlightElement($code[0])})};global.App=App})(window.jQuery,window);(function($,global){$(document).ready(function(){var app=new global.App})})(window.jQuery,window);var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});
diff --git a/themes/mytheme/sassdoc/assets/js/search.js b/themes/mytheme/sassdoc/assets/js/search.js
new file mode 100644
index 0000000..a5009ca
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/search.js
@@ -0,0 +1,146 @@
+(function ($, global) {
+
+  var Search = function (conf) {
+    this.conf = $.extend({
+      // Search DOM
+      search: {
+        items: '.sassdoc__item',
+        input: '#js-search-input',
+        form: '#js-search',
+        suggestionsWrapper: '#js-search-suggestions'
+      },
+
+      // Fuse options
+      fuse: {
+        keys: ['name'],
+        threshold: 0.3
+      },
+
+      init: true
+    }, conf || {});
+
+    if (this.conf.init === true) {
+      this.initialize();
+    }
+  };
+
+  Search.prototype.initialize = function () {
+    // Fuse engine instanciation
+    this.index = new Fuse($.map($(this.conf.search.items), function (item) {
+      var $item = $(item);
+
+      return {
+        group: $item.data('group'),
+        name: $item.data('name'),
+        type: $item.data('type'),
+        node: $item
+      };
+    }), this.conf.fuse);
+
+    this.initializeSearch();
+  };
+
+  // Fill DOM with search suggestions
+  Search.prototype.fillSuggestions = function (items) {
+    var searchSuggestions = $(this.conf.search.suggestionsWrapper);
+    searchSuggestions.html('');
+
+    var suggestions = $.map(items.slice(0, 10), function (item) {
+      var $li = $('<li />', {
+        'data-group': item.group,
+        'data-type': item.type,
+        'data-name': item.name,
+        'html': '<a href="#' + item.group + '-' + item.type + '-' + item.name + '"><code>' + item.type.slice(0, 3) + '</code> ' + item.name + '</a>'
+      });
+
+      searchSuggestions.append($li);
+      return $li;
+    });
+
+    return suggestions;
+  };
+
+  // Perform a search on a given term
+  Search.prototype.search = function (term) {
+    return this.fillSuggestions(this.index.search(term));
+  };
+
+  // Search logic
+  Search.prototype.initializeSearch = function () {
+    var searchForm = $(this.conf.search.form);
+    var searchInput = $(this.conf.search.input);
+    var searchSuggestions = $(this.conf.search.suggestionsWrapper);
+
+    var currentSelection = -1;
+    var suggestions = [];
+    var selected;
+
+    var self = this;
+
+    // Clicking on a suggestion
+    searchSuggestions.on('click', function (e) {
+      var target = $(event.target);
+
+      if (target.nodeName === 'A') {
+        searchInput.val(target.parent().data('name'));
+        suggestions = self.fillSuggestions([]);
+      }
+    });
+
+    // Filling the form
+    searchForm.on('keyup', function (e) {
+      e.preventDefault();
+
+      // Enter
+      if (e.keyCode === 13) {
+        if (selected) {
+          suggestions = self.fillSuggestions([]);
+          searchInput.val(selected.data('name'));
+          window.location = selected.children().first().attr('href');
+        }
+
+        e.stopPropagation();
+      }
+
+      // KeyDown
+      if (e.keyCode === 40) {
+        currentSelection = (currentSelection + 1) % suggestions.length;
+      }
+
+      // KeyUp
+      if (e.keyCode === 38) {
+        currentSelection = currentSelection - 1;
+
+        if (currentSelection < 0) {
+          currentSelection =  suggestions.length - 1;
+        }
+      }
+
+      if (suggestions[currentSelection]) {
+        if (selected) {
+          selected.removeClass('selected');
+        }
+
+        selected = suggestions[currentSelection];
+        selected.addClass('selected');
+      }
+
+    });
+
+    searchInput.on('keyup', function (e) {
+      if (e.keyCode !== 40 && e.keyCode !== 38) {
+        currentSelection = -1;
+        suggestions = self.search($(this).val());
+      }
+
+      else {
+        e.preventDefault();
+      }
+    }).on('search', function () {
+      suggestions = self.search($(this).val());
+    });
+  };
+
+  global.Search = Search;
+
+}(window.jQuery, window));
diff --git a/themes/mytheme/sassdoc/assets/js/sidebar.js b/themes/mytheme/sassdoc/assets/js/sidebar.js
new file mode 100644
index 0000000..b85852b
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/sidebar.js
@@ -0,0 +1,163 @@
+(function ($, global) {
+
+  var Sidebar = function (conf) {
+    this.conf = $.extend({
+
+      // Collapsed class
+      collapsedClass: 'is-collapsed',
+
+      // Storage key
+      storageKey: '_sassdoc_sidebar_index',
+
+      // Index attribute
+      indexAttribute: 'data-slug',
+
+      // Toggle button
+      toggleBtn: '.js-btn-toggle',
+
+      // Automatic initialization
+      init: true
+    }, conf || {});
+
+    if (this.conf.init === true) {
+      this.initialize();
+    }
+  };
+
+  /**
+   * Initialize module
+   */
+  Sidebar.prototype.initialize = function () {
+    this.conf.nodes = $('[' + this.conf.indexAttribute + ']');
+
+    this.load();
+    this.updateDOM();
+    this.bind();
+    this.loadToggle();
+  };
+
+
+  /**
+   * Load sidebar toggle
+   */
+  Sidebar.prototype.loadToggle = function () {
+    $('<span />', {
+      'class': 'layout-toggle',
+      'html': '&times;',
+      'data-alt': '&#8594;'
+    }).appendTo( $('.header') );
+
+    $('.layout-toggle').on('click', function () {
+      var $this = $(this);
+      var alt;
+
+      $('body').toggleClass('sidebar-closed');
+
+      alt = $this.html();
+      $this.html($this.data('alt'));
+      $this.data('alt', alt);
+    });
+  };
+
+  /**
+   * Load data from storage or create fresh index
+   */
+  Sidebar.prototype.load = function () {
+    var index = 'localStorage' in global ?
+      global.localStorage.getItem(this.conf.storageKey) :
+      null;
+
+    this.index = index ? JSON.parse(index) : this.buildIndex();
+  };
+
+  /**
+   * Build a fresh index
+   */
+  Sidebar.prototype.buildIndex = function () {
+    var index = {};
+    var $item;
+
+    this.conf.nodes.each($.proxy(function (index, item) {
+      $item = $(item);
+
+      index[$item.attr(this.conf.indexAttribute)] = !$item.hasClass(this.conf.collapsedClass);
+    }, this));
+
+    return index;
+  };
+
+  /**
+   * Update DOM based on index
+   */
+  Sidebar.prototype.updateDOM = function () {
+    var item;
+
+    for (item in this.index) {
+      if (this.index[item] === false) {
+        $('[' + this.conf.indexAttribute + '="' + item + '"]').addClass(this.conf.collapsedClass);
+      }
+    }
+  };
+
+  /**
+   * Save index in storage
+   */
+  Sidebar.prototype.save = function () {
+    if (!('localStorage' in global)) {
+      return;
+    }
+
+    global.localStorage.setItem(this.conf.storageKey, JSON.stringify(this.index));
+  };
+
+  /**
+   * Bind UI events
+   */
+  Sidebar.prototype.bind = function () {
+    var $item, slug, fn, text;
+    var collapsed = false;
+
+    // Save index in localStorage
+    global.onbeforeunload = $.proxy(function () {
+      this.save();
+    }, this);
+
+    // Toggle all
+    $(this.conf.toggleBtn).on('click', $.proxy(function (event) {
+      $node = $(event.target);
+
+      text = $node.attr('data-alt');
+      $node.attr('data-alt', $node.text());
+      $node.text(text);
+
+      fn = collapsed === true ? 'removeClass' : 'addClass';
+
+      this.conf.nodes.each($.proxy(function (index, item) {
+        $item = $(item);
+        slug = $item.attr(this.conf.indexAttribute);
+
+        this.index[slug] = collapsed;
+
+        $('[' + this.conf.indexAttribute + '="' + slug + '"]')[fn](this.conf.collapsedClass);
+      }, this));
+
+      collapsed = !collapsed;
+      this.save();
+    }, this));
+
+    // Toggle item
+    this.conf.nodes.on('click', $.proxy(function (event) {
+      $item = $(event.target);
+      slug = $item.attr(this.conf.indexAttribute);
+
+      // Update index
+      this.index[slug] = !this.index[slug];
+
+      // Update DOM
+      $item.toggleClass(this.conf.collapsedClass);
+    }, this));
+  };
+
+  global.Sidebar = Sidebar;
+
+}(window.jQuery, window));
diff --git a/themes/mytheme/sassdoc/assets/js/vendor/fuse.min.js b/themes/mytheme/sassdoc/assets/js/vendor/fuse.min.js
new file mode 100644
index 0000000..79898e9
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/vendor/fuse.min.js
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Fuse - Lightweight fuzzy-search
+ *
+ * Copyright (c) 2012 Kirollos Risk <kirollos@gmail.com>.
+ * All Rights Reserved. Apache Software License 2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+!function(t){function e(t,n){this.list=t,this.options=n=n||{};var i,o,s;for(i=0,keys=["sort","includeScore","shouldSort"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=s in n?n[s]:e.defaultOptions[s];for(i=0,keys=["searchFn","sortFn","keys","getFn"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=n[s]||e.defaultOptions[s]}var n=function(t,e){if(e=e||{},this.options=e,this.options.location=e.location||n.defaultOptions.location,this.options.distance="distance"in e?e.distance:n.defaultOptions.distance,this.options.threshold="threshold"in e?e.threshold:n.defaultOptions.threshold,this.options.maxPatternLength=e.maxPatternLength||n.defaultOptions.maxPatternLength,this.pattern=e.caseSensitive?t:t.toLowerCase(),this.patternLen=t.length,this.patternLen>this.options.maxPatternLength)throw new Error("Pattern length is too long");this.matchmask=1<<this.patternLen-1,this.patternAlphabet=this._calculatePatternAlphabet()};n.defaultOptions={location:0,distance:100,threshold:.6,maxPatternLength:32},n.prototype._calculatePatternAlphabet=function(){var t={},e=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]|=1<<this.pattern.length-e-1;return t},n.prototype._bitapScore=function(t,e){var n=t/this.patternLen,i=Math.abs(this.options.location-e);return this.options.distance?n+i/this.options.distance:i?1:n},n.prototype.search=function(t){if(t=this.options.caseSensitive?t:t.toLowerCase(),this.pattern===t)return{isMatch:!0,score:0};var e,n,i,o,s,r,a,h,p,c=t.length,l=this.options.location,u=this.options.threshold,f=t.indexOf(this.pattern,l),d=this.patternLen+c,g=1,m=[];for(-1!=f&&(u=Math.min(this._bitapScore(0,f),u),f=t.lastIndexOf(this.pattern,l+this.patternLen),-1!=f&&(u=Math.min(this._bitapScore(0,f),u))),f=-1,e=0;e<this.patternLen;e++){for(i=0,o=d;o>i;)this._bitapScore(e,l+o)<=u?i=o:d=o,o=Math.floor((d-i)/2+i);for(d=o,s=Math.max(1,l-o+1),r=Math.min(l+o,c)+this.patternLen,a=Array(r+2),a[r+1]=(1<<e)-1,n=r;n>=s;n--)if(p=this.patternAlphabet[t.charAt(n-1)],a[n]=0===e?(a[n+1]<<1|1)&p:(a[n+1]<<1|1)&p|((h[n+1]|h[n])<<1|1)|h[n+1],a[n]&this.matchmask&&(g=this._bitapScore(e,n-1),u>=g)){if(u=g,f=n-1,m.push(f),!(f>l))break;s=Math.max(1,2*l-f)}if(this._bitapScore(e+1,l)>u)break;h=a}return{isMatch:f>=0,score:g}};var i={deepValue:function(t,e){for(var n=0,e=e.split("."),i=e.length;i>n;n++){if(!t)return null;t=t[e[n]]}return t}};e.defaultOptions={id:null,caseSensitive:!1,includeScore:!1,shouldSort:!0,searchFn:n,sortFn:function(t,e){return t.score-e.score},getFn:i.deepValue,keys:[]},e.prototype.search=function(t){var e,n,o,s,r,a=new this.options.searchFn(t,this.options),h=this.list,p=h.length,c=this.options,l=this.options.keys,u=l.length,f=[],d={},g=[],m=function(t,e,n){void 0!==t&&null!==t&&"string"==typeof t&&(s=a.search(t),s.isMatch&&(r=d[n],r?r.score=Math.min(r.score,s.score):(d[n]={item:e,score:s.score},f.push(d[n]))))};if("string"==typeof h[0])for(var e=0;p>e;e++)m(h[e],e,e);else for(var e=0;p>e;e++)for(o=h[e],n=0;u>n;n++)m(this.options.getFn(o,l[n]),o,e);c.shouldSort&&f.sort(c.sortFn);for(var y=c.includeScore?function(t){return f[t]}:function(t){return f[t].item},L=c.id?function(t){return i.deepValue(y(t),c.id)}:function(t){return y(t)},e=0,v=f.length;v>e;e++)g.push(L(e));return g},"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Fuse=e}(this);
\ No newline at end of file
diff --git a/themes/mytheme/sassdoc/assets/js/vendor/jquery.min.js b/themes/mytheme/sassdoc/assets/js/vendor/jquery.min.js
new file mode 100644
index 0000000..e5ace11
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/vendor/jquery.min.js
@@ -0,0 +1,4 @@
+/*! jQuery v2.1.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
+!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.1",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return n.each(this,a,b)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){return!n.isArray(a)&&a-parseFloat(a)>=0},isPlainObject:function(a){return"object"!==n.type(a)||a.nodeType||n.isWindow(a)?!1:a.constructor&&!j.call(a.constructor.prototype,"isPrototypeOf")?!1:!0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?h[i.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=l.createElement("script"),b.text=a,l.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b,c){var d,e=0,f=a.length,g=s(a);if(c){if(g){for(;f>e;e++)if(d=b.apply(a[e],c),d===!1)break}else for(e in a)if(d=b.apply(a[e],c),d===!1)break}else if(g){for(;f>e;e++)if(d=b.call(a[e],e,a[e]),d===!1)break}else for(e in a)if(d=b.call(a[e],e,a[e]),d===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):f.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:g.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,f=0,g=a.length,h=s(a),i=[];if(h)for(;g>f;f++)d=b(a[f],f,c),null!=d&&i.push(d);else for(f in a)d=b(a[f],f,c),null!=d&&i.push(d);return e.apply([],i)},guid:1,proxy:function(a,b){var c,e,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(e=d.call(arguments,2),f=function(){return a.apply(b||this,e.concat(d.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:k}),n.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(a,b){h["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+-new Date,v=a.document,w=0,x=0,y=gb(),z=gb(),A=gb(),B=function(a,b){return a===b&&(l=!0),0},C="undefined",D=1<<31,E={}.hasOwnProperty,F=[],G=F.pop,H=F.push,I=F.push,J=F.slice,K=F.indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]===a)return b;return-1},L="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",N="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",O=N.replace("w","w#"),P="\\["+M+"*("+N+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+O+"))|)"+M+"*\\]",Q=":("+N+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+P+")*)|.*)\\)|)",R=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),S=new RegExp("^"+M+"*,"+M+"*"),T=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),V=new RegExp(Q),W=new RegExp("^"+O+"$"),X={ID:new RegExp("^#("+N+")"),CLASS:new RegExp("^\\.("+N+")"),TAG:new RegExp("^("+N.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+Q),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+L+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/^(?:input|select|textarea|button)$/i,Z=/^h\d$/i,$=/^[^{]+\{\s*\[native \w/,_=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ab=/[+~]/,bb=/'|\\/g,cb=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),db=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)};try{I.apply(F=J.call(v.childNodes),v.childNodes),F[v.childNodes.length].nodeType}catch(eb){I={apply:F.length?function(a,b){H.apply(a,J.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fb(a,b,d,e){var f,h,j,k,l,o,r,s,w,x;if((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,d=d||[],!a||"string"!=typeof a)return d;if(1!==(k=b.nodeType)&&9!==k)return[];if(p&&!e){if(f=_.exec(a))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)return d;if(h.id===j)return d.push(h),d}else if(b.ownerDocument&&(h=b.ownerDocument.getElementById(j))&&t(b,h)&&h.id===j)return d.push(h),d}else{if(f[2])return I.apply(d,b.getElementsByTagName(a)),d;if((j=f[3])&&c.getElementsByClassName&&b.getElementsByClassName)return I.apply(d,b.getElementsByClassName(j)),d}if(c.qsa&&(!q||!q.test(a))){if(s=r=u,w=b,x=9===k&&a,1===k&&"object"!==b.nodeName.toLowerCase()){o=g(a),(r=b.getAttribute("id"))?s=r.replace(bb,"\\$&"):b.setAttribute("id",s),s="[id='"+s+"'] ",l=o.length;while(l--)o[l]=s+qb(o[l]);w=ab.test(a)&&ob(b.parentNode)||b,x=o.join(",")}if(x)try{return I.apply(d,w.querySelectorAll(x)),d}catch(y){}finally{r||b.removeAttribute("id")}}}return i(a.replace(R,"$1"),b,d,e)}function gb(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function hb(a){return a[u]=!0,a}function ib(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function jb(a,b){var c=a.split("|"),e=a.length;while(e--)d.attrHandle[c[e]]=b}function kb(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||D)-(~a.sourceIndex||D);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function lb(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function mb(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function nb(a){return hb(function(b){return b=+b,hb(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function ob(a){return a&&typeof a.getElementsByTagName!==C&&a}c=fb.support={},f=fb.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fb.setDocument=function(a){var b,e=a?a.ownerDocument||a:v,g=e.defaultView;return e!==n&&9===e.nodeType&&e.documentElement?(n=e,o=e.documentElement,p=!f(e),g&&g!==g.top&&(g.addEventListener?g.addEventListener("unload",function(){m()},!1):g.attachEvent&&g.attachEvent("onunload",function(){m()})),c.attributes=ib(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ib(function(a){return a.appendChild(e.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=$.test(e.getElementsByClassName)&&ib(function(a){return a.innerHTML="<div class='a'></div><div class='a i'></div>",a.firstChild.className="i",2===a.getElementsByClassName("i").length}),c.getById=ib(function(a){return o.appendChild(a).id=u,!e.getElementsByName||!e.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if(typeof b.getElementById!==C&&p){var c=b.getElementById(a);return c&&c.parentNode?[c]:[]}},d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(cb,db);return function(a){var c=typeof a.getAttributeNode!==C&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return typeof b.getElementsByTagName!==C?b.getElementsByTagName(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return typeof b.getElementsByClassName!==C&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=$.test(e.querySelectorAll))&&(ib(function(a){a.innerHTML="<select msallowclip=''><option selected=''></option></select>",a.querySelectorAll("[msallowclip^='']").length&&q.push("[*^$]="+M+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+M+"*(?:value|"+L+")"),a.querySelectorAll(":checked").length||q.push(":checked")}),ib(function(a){var b=e.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+M+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=$.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ib(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",Q)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=$.test(o.compareDocumentPosition),t=b||$.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===e||a.ownerDocument===v&&t(v,a)?-1:b===e||b.ownerDocument===v&&t(v,b)?1:k?K.call(k,a)-K.call(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,f=a.parentNode,g=b.parentNode,h=[a],i=[b];if(!f||!g)return a===e?-1:b===e?1:f?-1:g?1:k?K.call(k,a)-K.call(k,b):0;if(f===g)return kb(a,b);c=a;while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?kb(h[d],i[d]):h[d]===v?-1:i[d]===v?1:0},e):n},fb.matches=function(a,b){return fb(a,null,null,b)},fb.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(U,"='$1']"),!(!c.matchesSelector||!p||r&&r.test(b)||q&&q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fb(b,n,null,[a]).length>0},fb.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fb.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&E.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fb.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fb.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fb.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fb.selectors={cacheLength:50,createPseudo:hb,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(cb,db),a[3]=(a[3]||a[4]||a[5]||"").replace(cb,db),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fb.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fb.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return X.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&V.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(cb,db).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+M+")"+a+"("+M+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||typeof a.getAttribute!==C&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fb.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h;if(q){if(f){while(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){k=q[u]||(q[u]={}),j=k[a]||[],n=j[0]===w&&j[1],m=j[0]===w&&j[2],l=n&&q.childNodes[n];while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if(s&&(j=(b[u]||(b[u]={}))[a])&&j[0]===w)m=j[1];else while(l=++n&&l&&l[p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(s&&((l[u]||(l[u]={}))[a]=[w,m]),l===b))break;return m-=e,m===d||m%d===0&&m/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fb.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?hb(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=K.call(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:hb(function(a){var b=[],c=[],d=h(a.replace(R,"$1"));return d[u]?hb(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),!c.pop()}}),has:hb(function(a){return function(b){return fb(a,b).length>0}}),contains:hb(function(a){return function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:hb(function(a){return W.test(a||"")||fb.error("unsupported lang: "+a),a=a.replace(cb,db).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Z.test(a.nodeName)},input:function(a){return Y.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:nb(function(){return[0]}),last:nb(function(a,b){return[b-1]}),eq:nb(function(a,b,c){return[0>c?c+b:c]}),even:nb(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:nb(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:nb(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:nb(function(a,b,c){for(var d=0>c?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=lb(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=mb(b);function pb(){}pb.prototype=d.filters=d.pseudos,d.setFilters=new pb,g=fb.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){(!c||(e=S.exec(h)))&&(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=T.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(R," ")}),h=h.slice(c.length));for(g in d.filter)!(e=X[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?fb.error(a):z(a,i).slice(0)};function qb(a){for(var b=0,c=a.length,d="";c>b;b++)d+=a[b].value;return d}function rb(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]===w&&h[1]===f)return j[2]=h[2];if(i[d]=j,j[2]=a(b,c,g))return!0}}}function sb(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function tb(a,b,c){for(var d=0,e=b.length;e>d;d++)fb(a,b[d],c);return c}function ub(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function vb(a,b,c,d,e,f){return d&&!d[u]&&(d=vb(d)),e&&!e[u]&&(e=vb(e,f)),hb(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||tb(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ub(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ub(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?K.call(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ub(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):I.apply(g,r)})}function wb(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=rb(function(a){return a===b},h,!0),l=rb(function(a){return K.call(b,a)>-1},h,!0),m=[function(a,c,d){return!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d))}];f>i;i++)if(c=d.relative[a[i].type])m=[rb(sb(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return vb(i>1&&sb(m),i>1&&qb(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(R,"$1"),c,e>i&&wb(a.slice(i,e)),f>e&&wb(a=a.slice(e)),f>e&&qb(a))}m.push(c)}return sb(m)}function xb(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,m,o,p=0,q="0",r=f&&[],s=[],t=j,u=f||e&&d.find.TAG("*",k),v=w+=null==t?1:Math.random()||.1,x=u.length;for(k&&(j=g!==n&&g);q!==x&&null!=(l=u[q]);q++){if(e&&l){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f&&r.push(l))}if(p+=q,c&&q!==p){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=G.call(i));s=ub(s)}I.apply(i,s),k&&!f&&s.length>0&&p+b.length>1&&fb.uniqueSort(i)}return k&&(w=v,j=t),r};return c?hb(f):f}return h=fb.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wb(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xb(e,d)),f.selector=a}return f},i=fb.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(cb,db),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=X.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(cb,db),ab.test(j[0].type)&&ob(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qb(j),!a)return I.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,ab.test(a)&&ob(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ib(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ib(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||jb("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ib(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||jb("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ib(function(a){return null==a.getAttribute("disabled")})||jb(L,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fb}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=n.expr.match.needsContext,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^.[^:#\[\.,]*$/;function x(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(w.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return g.call(b,a)>=0!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=this.length,d=[],e=this;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;c>b;b++)if(n.contains(e[b],this))return!0}));for(b=0;c>b;b++)n.find(a,e[b],d);return d=this.pushStack(c>1?n.unique(d):d),d.selector=this.selector?this.selector+" "+a:a,d},filter:function(a){return this.pushStack(x(this,a||[],!1))},not:function(a){return this.pushStack(x(this,a||[],!0))},is:function(a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}});var y,z=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,A=n.fn.init=function(a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:z.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:l,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}return d=l.getElementById(c[2]),d&&d.parentNode&&(this.length=1,this[0]=d),this.context=l,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};A.prototype=n.fn,y=n(l);var B=/^(?:parents|prev(?:Until|All))/,C={children:!0,contents:!0,next:!0,prev:!0};n.extend({dir:function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},sibling:function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c}}),n.fn.extend({has:function(a){var b=n(a,this),c=b.length;return this.filter(function(){for(var a=0;c>a;a++)if(n.contains(this,b[a]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=u.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.unique(f):f)},index:function(a){return a?"string"==typeof a?g.call(n(a),this[0]):g.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.unique(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function D(a,b){while((a=a[b])&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return n.dir(a,"parentNode")},parentsUntil:function(a,b,c){return n.dir(a,"parentNode",c)},next:function(a){return D(a,"nextSibling")},prev:function(a){return D(a,"previousSibling")},nextAll:function(a){return n.dir(a,"nextSibling")},prevAll:function(a){return n.dir(a,"previousSibling")},nextUntil:function(a,b,c){return n.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return n.dir(a,"previousSibling",c)},siblings:function(a){return n.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return n.sibling(a.firstChild)},contents:function(a){return a.contentDocument||n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(C[a]||n.unique(e),B.test(a)&&e.reverse()),this.pushStack(e)}});var E=/\S+/g,F={};function G(a){var b=F[a]={};return n.each(a.match(E)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?F[a]||G(a):n.extend({},a);var b,c,d,e,f,g,h=[],i=!a.once&&[],j=function(l){for(b=a.memory&&l,c=!0,g=e||0,e=0,f=h.length,d=!0;h&&f>g;g++)if(h[g].apply(l[0],l[1])===!1&&a.stopOnFalse){b=!1;break}d=!1,h&&(i?i.length&&j(i.shift()):b?h=[]:k.disable())},k={add:function(){if(h){var c=h.length;!function g(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&g(c)})}(arguments),d?f=h.length:b&&(e=c,j(b))}return this},remove:function(){return h&&n.each(arguments,function(a,b){var c;while((c=n.inArray(b,h,c))>-1)h.splice(c,1),d&&(f>=c&&f--,g>=c&&g--)}),this},has:function(a){return a?n.inArray(a,h)>-1:!(!h||!h.length)},empty:function(){return h=[],f=0,this},disable:function(){return h=i=b=void 0,this},disabled:function(){return!h},lock:function(){return i=void 0,b||k.disable(),this},locked:function(){return!i},fireWith:function(a,b){return!h||c&&!i||(b=b||[],b=[a,b.slice?b.slice():b],d?i.push(b):j(b)),this},fire:function(){return k.fireWith(this,arguments),this},fired:function(){return!!c}};return k},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=d.call(arguments),e=c.length,f=1!==e||a&&n.isFunction(a.promise)?e:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(e){b[a]=this,c[a]=arguments.length>1?d.call(arguments):e,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(e>1)for(i=new Array(e),j=new Array(e),k=new Array(e);e>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().done(h(b,k,c)).fail(g.reject).progress(h(b,j,i)):--f;return f||g.resolveWith(k,c),g.promise()}});var H;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(H.resolveWith(l,[n]),n.fn.triggerHandler&&(n(l).triggerHandler("ready"),n(l).off("ready"))))}});function I(){l.removeEventListener("DOMContentLoaded",I,!1),a.removeEventListener("load",I,!1),n.ready()}n.ready.promise=function(b){return H||(H=n.Deferred(),"complete"===l.readyState?setTimeout(n.ready):(l.addEventListener("DOMContentLoaded",I,!1),a.addEventListener("load",I,!1))),H.promise(b)},n.ready.promise();var J=n.access=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===n.type(c)){e=!0;for(h in c)n.access(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,n.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(n(a),c)})),b))for(;i>h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f};n.acceptData=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=n.expando+Math.random()}K.uid=1,K.accepts=n.acceptData,K.prototype={key:function(a){if(!K.accepts(a))return 0;var b={},c=a[this.expando];if(!c){c=K.uid++;try{b[this.expando]={value:c},Object.defineProperties(a,b)}catch(d){b[this.expando]=c,n.extend(a,b)}}return this.cache[c]||(this.cache[c]={}),c},set:function(a,b,c){var d,e=this.key(a),f=this.cache[e];if("string"==typeof b)f[b]=c;else if(n.isEmptyObject(f))n.extend(this.cache[e],b);else for(d in b)f[d]=b[d];return f},get:function(a,b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c){var d;return void 0===b||b&&"string"==typeof b&&void 0===c?(d=this.get(a,b),void 0!==d?d:this.get(a,n.camelCase(b))):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d,e,f=this.key(a),g=this.cache[f];if(void 0===b)this.cache[f]={};else{n.isArray(b)?d=b.concat(b.map(n.camelCase)):(e=n.camelCase(b),b in g?d=[b,e]:(d=e,d=d in g?[d]:d.match(E)||[])),c=d.length;while(c--)delete g[d[c]]}},hasData:function(a){return!n.isEmptyObject(this.cache[a[this.expando]]||{})},discard:function(a){a[this.expando]&&delete this.cache[a[this.expando]]}};var L=new K,M=new K,N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(O,"-$1").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}M.set(a,b,c)}else c=void 0;return c}n.extend({hasData:function(a){return M.hasData(a)||L.hasData(a)},data:function(a,b,c){return M.access(a,b,c)},removeData:function(a,b){M.remove(a,b)
+},_data:function(a,b,c){return L.access(a,b,c)},_removeData:function(a,b){L.remove(a,b)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=M.get(f),1===f.nodeType&&!L.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));L.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){M.set(this,a)}):J(this,function(b){var c,d=n.camelCase(a);if(f&&void 0===b){if(c=M.get(f,a),void 0!==c)return c;if(c=M.get(f,d),void 0!==c)return c;if(c=P(f,d,void 0),void 0!==c)return c}else this.each(function(){var c=M.get(this,d);M.set(this,d,b),-1!==a.indexOf("-")&&void 0!==c&&M.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){M.remove(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=L.get(a,b),c&&(!d||n.isArray(c)?d=L.access(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return L.get(a,c)||L.access(a,c,{empty:n.Callbacks("once memory").add(function(){L.remove(a,[b+"queue",c])})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?n.queue(this[0],a):void 0===b?this:this.each(function(){var c=n.queue(this,a,b);n._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&n.dequeue(this,a)})},dequeue:function(a){return this.each(function(){n.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=n.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=L.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var Q=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,R=["Top","Right","Bottom","Left"],S=function(a,b){return a=b||a,"none"===n.css(a,"display")||!n.contains(a.ownerDocument,a)},T=/^(?:checkbox|radio)$/i;!function(){var a=l.createDocumentFragment(),b=a.appendChild(l.createElement("div")),c=l.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),k.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h<b.length&&g.push({elem:this,handlers:b.slice(h)}),g},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return null==a.which&&(a.which=null!=b.charCode?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,b){var c,d,e,f=b.button;return null==a.pageX&&null!=b.clientX&&(c=a.target.ownerDocument||l,d=c.documentElement,e=c.body,a.pageX=b.clientX+(d&&d.scrollLeft||e&&e.scrollLeft||0)-(d&&d.clientLeft||e&&e.clientLeft||0),a.pageY=b.clientY+(d&&d.scrollTop||e&&e.scrollTop||0)-(d&&d.clientTop||e&&e.clientTop||0)),a.which||void 0===f||(a.which=1&f?1:2&f?3:4&f?2:0),a}},fix:function(a){if(a[n.expando])return a;var b,c,d,e=a.type,f=a,g=this.fixHooks[e];g||(this.fixHooks[e]=g=W.test(e)?this.mouseHooks:V.test(e)?this.keyHooks:{}),d=g.props?this.props.concat(g.props):this.props,a=new n.Event(f),b=d.length;while(b--)c=d[b],a[c]=f[c];return a.target||(a.target=l),3===a.target.nodeType&&(a.target=a.target.parentNode),g.filter?g.filter(a,f):a},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==_()&&this.focus?(this.focus(),!1):void 0},delegateType:"focusin"},blur:{trigger:function(){return this===_()&&this.blur?(this.blur(),!1):void 0},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&n.nodeName(this,"input")?(this.click(),!1):void 0},_default:function(a){return n.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}},simulate:function(a,b,c,d){var e=n.extend(new n.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?n.event.trigger(e,null,b):n.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},n.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)},n.Event=function(a,b){return this instanceof n.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?Z:$):this.type=a,b&&n.extend(this,b),this.timeStamp=a&&a.timeStamp||n.now(),void(this[n.expando]=!0)):new n.Event(a,b)},n.Event.prototype={isDefaultPrevented:$,isPropagationStopped:$,isImmediatePropagationStopped:$,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=Z,a&&a.preventDefault&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=Z,a&&a.stopPropagation&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=Z,a&&a.stopImmediatePropagation&&a.stopImmediatePropagation(),this.stopPropagation()}},n.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){n.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return(!e||e!==d&&!n.contains(d,e))&&(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),k.focusinBubbles||n.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){n.event.simulate(b,a.target,n.event.fix(a),!0)};n.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=L.access(d,b);e||d.addEventListener(a,c,!0),L.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=L.access(d,b)-1;e?L.access(d,b,e):(d.removeEventListener(a,c,!0),L.remove(d,b))}}}),n.fn.extend({on:function(a,b,c,d,e){var f,g;if("object"==typeof a){"string"!=typeof b&&(c=c||b,b=void 0);for(g in a)this.on(g,b,c,a[g],e);return this}if(null==c&&null==d?(d=b,c=b=void 0):null==d&&("string"==typeof b?(d=c,c=void 0):(d=c,c=b,b=void 0)),d===!1)d=$;else if(!d)return this;return 1===e&&(f=d,d=function(a){return n().off(a),f.apply(this,arguments)},d.guid=f.guid||(f.guid=n.guid++)),this.each(function(){n.event.add(this,a,d,c,b)})},one:function(a,b,c,d){return this.on(a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,n(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return(b===!1||"function"==typeof b)&&(c=b,b=void 0),c===!1&&(c=$),this.each(function(){n.event.remove(this,a,c,b)})},trigger:function(a,b){return this.each(function(){n.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];return c?n.event.trigger(a,b,c,!0):void 0}});var ab=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bb=/<([\w:]+)/,cb=/<|&#?\w+;/,db=/<(?:script|style|link)/i,eb=/checked\s*(?:[^=]|=\s*.checked.)/i,fb=/^$|\/(?:java|ecma)script/i,gb=/^true\/(.*)/,hb=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,ib={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};ib.optgroup=ib.option,ib.tbody=ib.tfoot=ib.colgroup=ib.caption=ib.thead,ib.th=ib.td;function jb(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function kb(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function lb(a){var b=gb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function mb(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function nb(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function ob(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pb(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=ob(h),f=ob(a),d=0,e=f.length;e>d;d++)pb(f[d],g[d]);if(b)if(c)for(f=f||ob(a),g=g||ob(h),d=0,e=f.length;e>d;d++)nb(f[d],g[d]);else nb(a,h);return g=ob(h,"script"),g.length>0&&mb(g,!i&&ob(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(cb.test(e)){f=f||k.appendChild(b.createElement("div")),g=(bb.exec(e)||["",""])[1].toLowerCase(),h=ib[g]||ib._default,f.innerHTML=h[1]+e.replace(ab,"<$1></$2>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=ob(k.appendChild(e),"script"),i&&mb(f),c)){j=0;while(e=f[j++])fb.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(ob(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&mb(ob(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(ob(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!db.test(a)&&!ib[(bb.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(ab,"<$1></$2>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ob(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(ob(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&eb.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(ob(c,"script"),kb),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,ob(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,lb),j=0;g>j;j++)h=f[j],fb.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(hb,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qb,rb={};function sb(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function tb(a){var b=l,c=rb[a];return c||(c=sb(a,b),"none"!==c&&c||(qb=(qb||n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),b=qb[0].contentDocument,b.write(),b.close(),c=sb(a,b),qb.detach()),rb[a]=c),c}var ub=/^margin/,vb=new RegExp("^("+Q+")(?!px)[a-z%]+$","i"),wb=function(a){return a.ownerDocument.defaultView.getComputedStyle(a,null)};function xb(a,b,c){var d,e,f,g,h=a.style;return c=c||wb(a),c&&(g=c.getPropertyValue(b)||c[b]),c&&(""!==g||n.contains(a.ownerDocument,a)||(g=n.style(a,b)),vb.test(g)&&ub.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function yb(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}!function(){var b,c,d=l.documentElement,e=l.createElement("div"),f=l.createElement("div");if(f.style){f.style.backgroundClip="content-box",f.cloneNode(!0).style.backgroundClip="",k.clearCloneStyle="content-box"===f.style.backgroundClip,e.style.cssText="border:0;width:0;height:0;top:0;left:-9999px;margin-top:1px;position:absolute",e.appendChild(f);function g(){f.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;margin-top:1%;top:1%;border:1px;padding:1px;width:4px;position:absolute",f.innerHTML="",d.appendChild(e);var g=a.getComputedStyle(f,null);b="1%"!==g.top,c="4px"===g.width,d.removeChild(e)}a.getComputedStyle&&n.extend(k,{pixelPosition:function(){return g(),b},boxSizingReliable:function(){return null==c&&g(),c},reliableMarginRight:function(){var b,c=f.appendChild(l.createElement("div"));return c.style.cssText=f.style.cssText="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:0",c.style.marginRight=c.style.width="0",f.style.width="1px",d.appendChild(e),b=!parseFloat(a.getComputedStyle(c,null).marginRight),d.removeChild(e),b}})}}(),n.swap=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};var zb=/^(none|table(?!-c[ea]).+)/,Ab=new RegExp("^("+Q+")(.*)$","i"),Bb=new RegExp("^([+-])=("+Q+")","i"),Cb={position:"absolute",visibility:"hidden",display:"block"},Db={letterSpacing:"0",fontWeight:"400"},Eb=["Webkit","O","Moz","ms"];function Fb(a,b){if(b in a)return b;var c=b[0].toUpperCase()+b.slice(1),d=b,e=Eb.length;while(e--)if(b=Eb[e]+c,b in a)return b;return d}function Gb(a,b,c){var d=Ab.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function Hb(a,b,c,d,e){for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=n.css(a,c+R[f],!0,e)),d?("content"===c&&(g-=n.css(a,"padding"+R[f],!0,e)),"margin"!==c&&(g-=n.css(a,"border"+R[f]+"Width",!0,e))):(g+=n.css(a,"padding"+R[f],!0,e),"padding"!==c&&(g+=n.css(a,"border"+R[f]+"Width",!0,e)));return g}function Ib(a,b,c){var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=wb(a),g="border-box"===n.css(a,"boxSizing",!1,f);if(0>=e||null==e){if(e=xb(a,b,f),(0>e||null==e)&&(e=a.style[b]),vb.test(e))return e;d=g&&(k.boxSizingReliable()||e===a.style[b]),e=parseFloat(e)||0}return e+Hb(a,b,c||(g?"border":"content"),d,f)+"px"}function Jb(a,b){for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=L.get(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&S(d)&&(f[g]=L.access(d,"olddisplay",tb(d.nodeName)))):(e=S(d),"none"===c&&e||L.set(d,"olddisplay",e?c:n.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}n.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=xb(a,"opacity");return""===c?"1":c}}}},cssNumber:{columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=n.camelCase(b),i=a.style;return b=n.cssProps[h]||(n.cssProps[h]=Fb(i,h)),g=n.cssHooks[b]||n.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=Bb.exec(c))&&(c=(e[1]+1)*e[2]+parseFloat(n.css(a,b)),f="number"),null!=c&&c===c&&("number"!==f||n.cssNumber[h]||(c+="px"),k.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=n.camelCase(b);return b=n.cssProps[h]||(n.cssProps[h]=Fb(a.style,h)),g=n.cssHooks[b]||n.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=xb(a,b,d)),"normal"===e&&b in Db&&(e=Db[b]),""===c||c?(f=parseFloat(e),c===!0||n.isNumeric(f)?f||0:e):e}}),n.each(["height","width"],function(a,b){n.cssHooks[b]={get:function(a,c,d){return c?zb.test(n.css(a,"display"))&&0===a.offsetWidth?n.swap(a,Cb,function(){return Ib(a,b,d)}):Ib(a,b,d):void 0},set:function(a,c,d){var e=d&&wb(a);return Gb(a,c,d?Hb(a,b,d,"border-box"===n.css(a,"boxSizing",!1,e),e):0)}}}),n.cssHooks.marginRight=yb(k.reliableMarginRight,function(a,b){return b?n.swap(a,{display:"inline-block"},xb,[a,"marginRight"]):void 0}),n.each({margin:"",padding:"",border:"Width"},function(a,b){n.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];4>d;d++)e[a+R[d]+b]=f[d]||f[d-2]||f[0];return e}},ub.test(a)||(n.cssHooks[a+b].set=Gb)}),n.fn.extend({css:function(a,b){return J(this,function(a,b,c){var d,e,f={},g=0;if(n.isArray(b)){for(d=wb(a),e=b.length;e>g;g++)f[b[g]]=n.css(a,b[g],!1,d);return f}return void 0!==c?n.style(a,b,c):n.css(a,b)},a,b,arguments.length>1)},show:function(){return Jb(this,!0)},hide:function(){return Jb(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){S(this)?n(this).show():n(this).hide()})}});function Kb(a,b,c,d,e){return new Kb.prototype.init(a,b,c,d,e)}n.Tween=Kb,Kb.prototype={constructor:Kb,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(n.cssNumber[c]?"":"px")},cur:function(){var a=Kb.propHooks[this.prop];return a&&a.get?a.get(this):Kb.propHooks._default.get(this)},run:function(a){var b,c=Kb.propHooks[this.prop];return this.pos=b=this.options.duration?n.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Kb.propHooks._default.set(this),this}},Kb.prototype.init.prototype=Kb.prototype,Kb.propHooks={_default:{get:function(a){var b;return null==a.elem[a.prop]||a.elem.style&&null!=a.elem.style[a.prop]?(b=n.css(a.elem,a.prop,""),b&&"auto"!==b?b:0):a.elem[a.prop]},set:function(a){n.fx.step[a.prop]?n.fx.step[a.prop](a):a.elem.style&&(null!=a.elem.style[n.cssProps[a.prop]]||n.cssHooks[a.prop])?n.style(a.elem,a.prop,a.now+a.unit):a.elem[a.prop]=a.now}}},Kb.propHooks.scrollTop=Kb.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},n.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2}},n.fx=Kb.prototype.init,n.fx.step={};var Lb,Mb,Nb=/^(?:toggle|show|hide)$/,Ob=new RegExp("^(?:([+-])=|)("+Q+")([a-z%]*)$","i"),Pb=/queueHooks$/,Qb=[Vb],Rb={"*":[function(a,b){var c=this.createTween(a,b),d=c.cur(),e=Ob.exec(b),f=e&&e[3]||(n.cssNumber[a]?"":"px"),g=(n.cssNumber[a]||"px"!==f&&+d)&&Ob.exec(n.css(c.elem,a)),h=1,i=20;if(g&&g[3]!==f){f=f||g[3],e=e||[],g=+d||1;do h=h||".5",g/=h,n.style(c.elem,a,g+f);while(h!==(h=c.cur()/d)&&1!==h&&--i)}return e&&(g=c.start=+g||+d||0,c.unit=f,c.end=e[1]?g+(e[1]+1)*e[2]:+e[2]),c}]};function Sb(){return setTimeout(function(){Lb=void 0}),Lb=n.now()}function Tb(a,b){var c,d=0,e={height:a};for(b=b?1:0;4>d;d+=2-b)c=R[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function Ub(a,b,c){for(var d,e=(Rb[b]||[]).concat(Rb["*"]),f=0,g=e.length;g>f;f++)if(d=e[f].call(c,b,a))return d}function Vb(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={},o=a.style,p=a.nodeType&&S(a),q=L.get(a,"fxshow");c.queue||(h=n._queueHooks(a,"fx"),null==h.unqueued&&(h.unqueued=0,i=h.empty.fire,h.empty.fire=function(){h.unqueued||i()}),h.unqueued++,l.always(function(){l.always(function(){h.unqueued--,n.queue(a,"fx").length||h.empty.fire()})})),1===a.nodeType&&("height"in b||"width"in b)&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=n.css(a,"display"),k="none"===j?L.get(a,"olddisplay")||tb(a.nodeName):j,"inline"===k&&"none"===n.css(a,"float")&&(o.display="inline-block")),c.overflow&&(o.overflow="hidden",l.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]}));for(d in b)if(e=b[d],Nb.exec(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}m[d]=q&&q[d]||n.style(a,d)}else j=void 0;if(n.isEmptyObject(m))"inline"===("none"===j?tb(a.nodeName):j)&&(o.display=j);else{q?"hidden"in q&&(p=q.hidden):q=L.access(a,"fxshow",{}),f&&(q.hidden=!p),p?n(a).show():l.done(function(){n(a).hide()}),l.done(function(){var b;L.remove(a,"fxshow");for(b in m)n.style(a,b,m[b])});for(d in m)g=Ub(p?q[d]:0,d,l),d in q||(q[d]=g.start,p&&(g.end=g.start,g.start="width"===d||"height"===d?1:0))}}function Wb(a,b){var c,d,e,f,g;for(c in a)if(d=n.camelCase(c),e=b[d],f=a[c],n.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=n.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function Xb(a,b,c){var d,e,f=0,g=Qb.length,h=n.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Lb||Sb(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;i>g;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),1>f&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:n.extend({},b),opts:n.extend(!0,{specialEasing:{}},c),originalProperties:b,originalOptions:c,startTime:Lb||Sb(),duration:c.duration,tweens:[],createTween:function(b,c){var d=n.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;d>c;c++)j.tweens[c].run(1);return b?h.resolveWith(a,[j,b]):h.rejectWith(a,[j,b]),this}}),k=j.props;for(Wb(k,j.opts.specialEasing);g>f;f++)if(d=Qb[f].call(j,a,k,j.opts))return d;return n.map(k,Ub,j),n.isFunction(j.opts.start)&&j.opts.start.call(a,j),n.fx.timer(n.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}n.Animation=n.extend(Xb,{tweener:function(a,b){n.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");for(var c,d=0,e=a.length;e>d;d++)c=a[d],Rb[c]=Rb[c]||[],Rb[c].unshift(b)},prefilter:function(a,b){b?Qb.unshift(a):Qb.push(a)}}),n.speed=function(a,b,c){var d=a&&"object"==typeof a?n.extend({},a):{complete:c||!c&&b||n.isFunction(a)&&a,duration:a,easing:c&&b||b&&!n.isFunction(b)&&b};return d.duration=n.fx.off?0:"number"==typeof d.duration?d.duration:d.duration in n.fx.speeds?n.fx.speeds[d.duration]:n.fx.speeds._default,(null==d.queue||d.queue===!0)&&(d.queue="fx"),d.old=d.complete,d.complete=function(){n.isFunction(d.old)&&d.old.call(this),d.queue&&n.dequeue(this,d.queue)},d},n.fn.extend({fadeTo:function(a,b,c,d){return this.filter(S).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=n.isEmptyObject(a),f=n.speed(b,c,d),g=function(){var b=Xb(this,n.extend({},a),f);(e||L.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=n.timers,g=L.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&Pb.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));(b||!c)&&n.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=L.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=n.timers,g=d?d.length:0;for(c.finish=!0,n.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;g>b;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),n.each(["toggle","show","hide"],function(a,b){var c=n.fn[b];n.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(Tb(b,!0),a,d,e)}}),n.each({slideDown:Tb("show"),slideUp:Tb("hide"),slideToggle:Tb("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){n.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),n.timers=[],n.fx.tick=function(){var a,b=0,c=n.timers;for(Lb=n.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||n.fx.stop(),Lb=void 0},n.fx.timer=function(a){n.timers.push(a),a()?n.fx.start():n.timers.pop()},n.fx.interval=13,n.fx.start=function(){Mb||(Mb=setInterval(n.fx.tick,n.fx.interval))},n.fx.stop=function(){clearInterval(Mb),Mb=null},n.fx.speeds={slow:600,fast:200,_default:400},n.fn.delay=function(a,b){return a=n.fx?n.fx.speeds[a]||a:a,b=b||"fx",this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},function(){var a=l.createElement("input"),b=l.createElement("select"),c=b.appendChild(l.createElement("option"));a.type="checkbox",k.checkOn=""!==a.value,k.optSelected=c.selected,b.disabled=!0,k.optDisabled=!c.disabled,a=l.createElement("input"),a.value="t",a.type="radio",k.radioValue="t"===a.value}();var Yb,Zb,$b=n.expr.attrHandle;n.fn.extend({attr:function(a,b){return J(this,n.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){n.removeAttr(this,a)})}}),n.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(a&&3!==f&&8!==f&&2!==f)return typeof a.getAttribute===U?n.prop(a,b,c):(1===f&&n.isXMLDoc(a)||(b=b.toLowerCase(),d=n.attrHooks[b]||(n.expr.match.bool.test(b)?Zb:Yb)),void 0===c?d&&"get"in d&&null!==(e=d.get(a,b))?e:(e=n.find.attr(a,b),null==e?void 0:e):null!==c?d&&"set"in d&&void 0!==(e=d.set(a,c,b))?e:(a.setAttribute(b,c+""),c):void n.removeAttr(a,b))
+},removeAttr:function(a,b){var c,d,e=0,f=b&&b.match(E);if(f&&1===a.nodeType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.removeAttribute(c)},attrHooks:{type:{set:function(a,b){if(!k.radioValue&&"radio"===b&&n.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}}}),Zb={set:function(a,b,c){return b===!1?n.removeAttr(a,c):a.setAttribute(c,c),c}},n.each(n.expr.match.bool.source.match(/\w+/g),function(a,b){var c=$b[b]||n.find.attr;$b[b]=function(a,b,d){var e,f;return d||(f=$b[b],$b[b]=e,e=null!=c(a,b,d)?b.toLowerCase():null,$b[b]=f),e}});var _b=/^(?:input|select|textarea|button)$/i;n.fn.extend({prop:function(a,b){return J(this,n.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[n.propFix[a]||a]})}}),n.extend({propFix:{"for":"htmlFor","class":"className"},prop:function(a,b,c){var d,e,f,g=a.nodeType;if(a&&3!==g&&8!==g&&2!==g)return f=1!==g||!n.isXMLDoc(a),f&&(b=n.propFix[b]||b,e=n.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){return a.hasAttribute("tabindex")||_b.test(a.nodeName)||a.href?a.tabIndex:-1}}}}),k.optSelected||(n.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null}}),n.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){n.propFix[this.toLowerCase()]=this});var ac=/[\t\r\n\f]/g;n.fn.extend({addClass:function(a){var b,c,d,e,f,g,h="string"==typeof a&&a,i=0,j=this.length;if(n.isFunction(a))return this.each(function(b){n(this).addClass(a.call(this,b,this.className))});if(h)for(b=(a||"").match(E)||[];j>i;i++)if(c=this[i],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(ac," "):" ")){f=0;while(e=b[f++])d.indexOf(" "+e+" ")<0&&(d+=e+" ");g=n.trim(d),c.className!==g&&(c.className=g)}return this},removeClass:function(a){var b,c,d,e,f,g,h=0===arguments.length||"string"==typeof a&&a,i=0,j=this.length;if(n.isFunction(a))return this.each(function(b){n(this).removeClass(a.call(this,b,this.className))});if(h)for(b=(a||"").match(E)||[];j>i;i++)if(c=this[i],d=1===c.nodeType&&(c.className?(" "+c.className+" ").replace(ac," "):"")){f=0;while(e=b[f++])while(d.indexOf(" "+e+" ")>=0)d=d.replace(" "+e+" "," ");g=a?n.trim(d):"",c.className!==g&&(c.className=g)}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):this.each(n.isFunction(a)?function(c){n(this).toggleClass(a.call(this,c,this.className,b),b)}:function(){if("string"===c){var b,d=0,e=n(this),f=a.match(E)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(c===U||"boolean"===c)&&(this.className&&L.set(this,"__className__",this.className),this.className=this.className||a===!1?"":L.get(this,"__className__")||"")})},hasClass:function(a){for(var b=" "+a+" ",c=0,d=this.length;d>c;c++)if(1===this[c].nodeType&&(" "+this[c].className+" ").replace(ac," ").indexOf(b)>=0)return!0;return!1}});var bc=/\r/g;n.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=n.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,n(this).val()):a,null==e?e="":"number"==typeof e?e+="":n.isArray(e)&&(e=n.map(e,function(a){return null==a?"":a+""})),b=n.valHooks[this.type]||n.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=n.valHooks[e.type]||n.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(bc,""):null==c?"":c)}}}),n.extend({valHooks:{option:{get:function(a){var b=n.find.attr(a,"value");return null!=b?b:n.trim(n.text(a))}},select:{get:function(a){for(var b,c,d=a.options,e=a.selectedIndex,f="select-one"===a.type||0>e,g=f?null:[],h=f?e+1:d.length,i=0>e?h:f?e:0;h>i;i++)if(c=d[i],!(!c.selected&&i!==e||(k.optDisabled?c.disabled:null!==c.getAttribute("disabled"))||c.parentNode.disabled&&n.nodeName(c.parentNode,"optgroup"))){if(b=n(c).val(),f)return b;g.push(b)}return g},set:function(a,b){var c,d,e=a.options,f=n.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=n.inArray(d.value,f)>=0)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),n.each(["radio","checkbox"],function(){n.valHooks[this]={set:function(a,b){return n.isArray(b)?a.checked=n.inArray(n(a).val(),b)>=0:void 0}},k.checkOn||(n.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})}),n.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){n.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),n.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}});var cc=n.now(),dc=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(a){var b,c;if(!a||"string"!=typeof a)return null;try{c=new DOMParser,b=c.parseFromString(a,"text/xml")}catch(d){b=void 0}return(!b||b.getElementsByTagName("parsererror").length)&&n.error("Invalid XML: "+a),b};var ec,fc,gc=/#.*$/,hc=/([?&])_=[^&]*/,ic=/^(.*?):[ \t]*([^\r\n]*)$/gm,jc=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,kc=/^(?:GET|HEAD)$/,lc=/^\/\//,mc=/^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/,nc={},oc={},pc="*/".concat("*");try{fc=location.href}catch(qc){fc=l.createElement("a"),fc.href="",fc=fc.href}ec=mc.exec(fc.toLowerCase())||[];function rc(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(E)||[];if(n.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function sc(a,b,c,d){var e={},f=a===oc;function g(h){var i;return e[h]=!0,n.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function tc(a,b){var c,d,e=n.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&n.extend(!0,a,d),a}function uc(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}return f?(f!==i[0]&&i.unshift(f),c[f]):void 0}function vc(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}n.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:fc,type:"GET",isLocal:jc.test(ec[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":pc,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":n.parseJSON,"text xml":n.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?tc(tc(a,n.ajaxSettings),b):tc(n.ajaxSettings,a)},ajaxPrefilter:rc(nc),ajaxTransport:rc(oc),ajax:function(a,b){"object"==typeof a&&(b=a,a=void 0),b=b||{};var c,d,e,f,g,h,i,j,k=n.ajaxSetup({},b),l=k.context||k,m=k.context&&(l.nodeType||l.jquery)?n(l):n.event,o=n.Deferred(),p=n.Callbacks("once memory"),q=k.statusCode||{},r={},s={},t=0,u="canceled",v={readyState:0,getResponseHeader:function(a){var b;if(2===t){if(!f){f={};while(b=ic.exec(e))f[b[1].toLowerCase()]=b[2]}b=f[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return 2===t?e:null},setRequestHeader:function(a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this},overrideMimeType:function(a){return t||(k.mimeType=a),this},statusCode:function(a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this},abort:function(a){var b=a||u;return c&&c.abort(b),x(0,b),this}};if(o.promise(v).complete=p.add,v.success=v.done,v.error=v.fail,k.url=((a||k.url||fc)+"").replace(gc,"").replace(lc,ec[1]+"//"),k.type=b.method||b.type||k.method||k.type,k.dataTypes=n.trim(k.dataType||"*").toLowerCase().match(E)||[""],null==k.crossDomain&&(h=mc.exec(k.url.toLowerCase()),k.crossDomain=!(!h||h[1]===ec[1]&&h[2]===ec[2]&&(h[3]||("http:"===h[1]?"80":"443"))===(ec[3]||("http:"===ec[1]?"80":"443")))),k.data&&k.processData&&"string"!=typeof k.data&&(k.data=n.param(k.data,k.traditional)),sc(nc,k,b,v),2===t)return v;i=k.global,i&&0===n.active++&&n.event.trigger("ajaxStart"),k.type=k.type.toUpperCase(),k.hasContent=!kc.test(k.type),d=k.url,k.hasContent||(k.data&&(d=k.url+=(dc.test(d)?"&":"?")+k.data,delete k.data),k.cache===!1&&(k.url=hc.test(d)?d.replace(hc,"$1_="+cc++):d+(dc.test(d)?"&":"?")+"_="+cc++)),k.ifModified&&(n.lastModified[d]&&v.setRequestHeader("If-Modified-Since",n.lastModified[d]),n.etag[d]&&v.setRequestHeader("If-None-Match",n.etag[d])),(k.data&&k.hasContent&&k.contentType!==!1||b.contentType)&&v.setRequestHeader("Content-Type",k.contentType),v.setRequestHeader("Accept",k.dataTypes[0]&&k.accepts[k.dataTypes[0]]?k.accepts[k.dataTypes[0]]+("*"!==k.dataTypes[0]?", "+pc+"; q=0.01":""):k.accepts["*"]);for(j in k.headers)v.setRequestHeader(j,k.headers[j]);if(k.beforeSend&&(k.beforeSend.call(l,v,k)===!1||2===t))return v.abort();u="abort";for(j in{success:1,error:1,complete:1})v[j](k[j]);if(c=sc(oc,k,b,v)){v.readyState=1,i&&m.trigger("ajaxSend",[v,k]),k.async&&k.timeout>0&&(g=setTimeout(function(){v.abort("timeout")},k.timeout));try{t=1,c.send(r,x)}catch(w){if(!(2>t))throw w;x(-1,w)}}else x(-1,"No Transport");function x(a,b,f,h){var j,r,s,u,w,x=b;2!==t&&(t=2,g&&clearTimeout(g),c=void 0,e=h||"",v.readyState=a>0?4:0,j=a>=200&&300>a||304===a,f&&(u=uc(k,v,f)),u=vc(k,u,v,j),j?(k.ifModified&&(w=v.getResponseHeader("Last-Modified"),w&&(n.lastModified[d]=w),w=v.getResponseHeader("etag"),w&&(n.etag[d]=w)),204===a||"HEAD"===k.type?x="nocontent":304===a?x="notmodified":(x=u.state,r=u.data,s=u.error,j=!s)):(s=x,(a||!x)&&(x="error",0>a&&(a=0))),v.status=a,v.statusText=(b||x)+"",j?o.resolveWith(l,[r,x,v]):o.rejectWith(l,[v,x,s]),v.statusCode(q),q=void 0,i&&m.trigger(j?"ajaxSuccess":"ajaxError",[v,k,j?r:s]),p.fireWith(l,[v,x]),i&&(m.trigger("ajaxComplete",[v,k]),--n.active||n.event.trigger("ajaxStop")))}return v},getJSON:function(a,b,c){return n.get(a,b,c,"json")},getScript:function(a,b){return n.get(a,void 0,b,"script")}}),n.each(["get","post"],function(a,b){n[b]=function(a,c,d,e){return n.isFunction(c)&&(e=e||d,d=c,c=void 0),n.ajax({url:a,type:b,dataType:e,data:c,success:d})}}),n.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){n.fn[b]=function(a){return this.on(b,a)}}),n._evalUrl=function(a){return n.ajax({url:a,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})},n.fn.extend({wrapAll:function(a){var b;return n.isFunction(a)?this.each(function(b){n(this).wrapAll(a.call(this,b))}):(this[0]&&(b=n(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this)},wrapInner:function(a){return this.each(n.isFunction(a)?function(b){n(this).wrapInner(a.call(this,b))}:function(){var b=n(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=n.isFunction(a);return this.each(function(c){n(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){n.nodeName(this,"body")||n(this).replaceWith(this.childNodes)}).end()}}),n.expr.filters.hidden=function(a){return a.offsetWidth<=0&&a.offsetHeight<=0},n.expr.filters.visible=function(a){return!n.expr.filters.hidden(a)};var wc=/%20/g,xc=/\[\]$/,yc=/\r?\n/g,zc=/^(?:submit|button|image|reset|file)$/i,Ac=/^(?:input|select|textarea|keygen)/i;function Bc(a,b,c,d){var e;if(n.isArray(b))n.each(b,function(b,e){c||xc.test(a)?d(a,e):Bc(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==n.type(b))d(a,b);else for(e in b)Bc(a+"["+e+"]",b[e],c,d)}n.param=function(a,b){var c,d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};if(void 0===b&&(b=n.ajaxSettings&&n.ajaxSettings.traditional),n.isArray(a)||a.jquery&&!n.isPlainObject(a))n.each(a,function(){e(this.name,this.value)});else for(c in a)Bc(c,a[c],b,e);return d.join("&").replace(wc,"+")},n.fn.extend({serialize:function(){return n.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=n.prop(this,"elements");return a?n.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!n(this).is(":disabled")&&Ac.test(this.nodeName)&&!zc.test(a)&&(this.checked||!T.test(a))}).map(function(a,b){var c=n(this).val();return null==c?null:n.isArray(c)?n.map(c,function(a){return{name:b.name,value:a.replace(yc,"\r\n")}}):{name:b.name,value:c.replace(yc,"\r\n")}}).get()}}),n.ajaxSettings.xhr=function(){try{return new XMLHttpRequest}catch(a){}};var Cc=0,Dc={},Ec={0:200,1223:204},Fc=n.ajaxSettings.xhr();a.ActiveXObject&&n(a).on("unload",function(){for(var a in Dc)Dc[a]()}),k.cors=!!Fc&&"withCredentials"in Fc,k.ajax=Fc=!!Fc,n.ajaxTransport(function(a){var b;return k.cors||Fc&&!a.crossDomain?{send:function(c,d){var e,f=a.xhr(),g=++Cc;if(f.open(a.type,a.url,a.async,a.username,a.password),a.xhrFields)for(e in a.xhrFields)f[e]=a.xhrFields[e];a.mimeType&&f.overrideMimeType&&f.overrideMimeType(a.mimeType),a.crossDomain||c["X-Requested-With"]||(c["X-Requested-With"]="XMLHttpRequest");for(e in c)f.setRequestHeader(e,c[e]);b=function(a){return function(){b&&(delete Dc[g],b=f.onload=f.onerror=null,"abort"===a?f.abort():"error"===a?d(f.status,f.statusText):d(Ec[f.status]||f.status,f.statusText,"string"==typeof f.responseText?{text:f.responseText}:void 0,f.getAllResponseHeaders()))}},f.onload=b(),f.onerror=b("error"),b=Dc[g]=b("abort");try{f.send(a.hasContent&&a.data||null)}catch(h){if(b)throw h}},abort:function(){b&&b()}}:void 0}),n.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(a){return n.globalEval(a),a}}}),n.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),n.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(d,e){b=n("<script>").prop({async:!0,charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&e("error"===a.type?404:200,a.type)}),l.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Gc=[],Hc=/(=)\?(?=&|$)|\?\?/;n.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Gc.pop()||n.expando+"_"+cc++;return this[a]=!0,a}}),n.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Hc.test(b.url)?"url":"string"==typeof b.data&&!(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Hc.test(b.data)&&"data");return h||"jsonp"===b.dataTypes[0]?(e=b.jsonpCallback=n.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Hc,"$1"+e):b.jsonp!==!1&&(b.url+=(dc.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||n.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Gc.push(e)),g&&n.isFunction(f)&&f(g[0]),g=f=void 0}),"script"):void 0}),n.parseHTML=function(a,b,c){if(!a||"string"!=typeof a)return null;"boolean"==typeof b&&(c=b,b=!1),b=b||l;var d=v.exec(a),e=!c&&[];return d?[b.createElement(d[1])]:(d=n.buildFragment([a],b,e),e&&e.length&&n(e).remove(),n.merge([],d.childNodes))};var Ic=n.fn.load;n.fn.load=function(a,b,c){if("string"!=typeof a&&Ic)return Ic.apply(this,arguments);var d,e,f,g=this,h=a.indexOf(" ");return h>=0&&(d=n.trim(a.slice(h)),a=a.slice(0,h)),n.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&n.ajax({url:a,type:e,dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?n("<div>").append(n.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,f||[a.responseText,b,a])}),this},n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};var Jc=a.document.documentElement;function Kc(a){return n.isWindow(a)?a:9===a.nodeType&&a.defaultView}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d=this[0],e={top:0,left:0},f=d&&d.ownerDocument;if(f)return b=f.documentElement,n.contains(b,d)?(typeof d.getBoundingClientRect!==U&&(e=d.getBoundingClientRect()),c=Kc(f),{top:e.top+c.pageYOffset-b.clientTop,left:e.left+c.pageXOffset-b.clientLeft}):e},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===n.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(d=a.offset()),d.top+=n.css(a[0],"borderTopWidth",!0),d.left+=n.css(a[0],"borderLeftWidth",!0)),{top:b.top-d.top-n.css(c,"marginTop",!0),left:b.left-d.left-n.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||Jc;while(a&&!n.nodeName(a,"html")&&"static"===n.css(a,"position"))a=a.offsetParent;return a||Jc})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(b,c){var d="pageYOffset"===c;n.fn[b]=function(e){return J(this,function(b,e,f){var g=Kc(b);return void 0===f?g?g[c]:b[e]:void(g?g.scrollTo(d?a.pageXOffset:f,d?f:a.pageYOffset):b[e]=f)},b,e,arguments.length,null)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=yb(k.pixelPosition,function(a,c){return c?(c=xb(a,b),vb.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return J(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.size=function(){return this.length},n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var Lc=a.jQuery,Mc=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=Mc),b&&a.jQuery===n&&(a.jQuery=Lc),n},typeof b===U&&(a.jQuery=a.$=n),n});
diff --git a/themes/mytheme/sassdoc/assets/js/vendor/prism.min.js b/themes/mytheme/sassdoc/assets/js/vendor/prism.min.js
new file mode 100644
index 0000000..30d8725
--- /dev/null
+++ b/themes/mytheme/sassdoc/assets/js/vendor/prism.min.js
@@ -0,0 +1,9 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+scss */
+var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);;
+Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
+Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});;
+Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
+Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
+;
+Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
\ No newline at end of file
diff --git a/themes/mytheme/theme.scss b/themes/mytheme/theme.scss
new file mode 100644
index 0000000..03b4fac
--- /dev/null
+++ b/themes/mytheme/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../designer/_components';
+@import './_extensions';
\ No newline at end of file
diff --git a/themes/mytheme/variables/_button.scss b/themes/mytheme/variables/_button.scss
new file mode 100644
index 0000000..1e95f11
--- /dev/null
+++ b/themes/mytheme/variables/_button.scss
@@ -0,0 +1,435 @@
+/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group button
+$buttonPadding: .5rem 1rem;
+
+/// Width of a button having an icon with no label
+/// @group button
+$buttonIconOnlyWidth: 2.357rem;
+
+/// Padding of a button having an icon with no label
+/// @group button
+$buttonIconOnlyPadding: .5rem 0;
+
+/// Background of a button
+/// @group button
+$buttonBg: $primaryColor;
+
+/// Text color of a button
+/// @group button
+$buttonTextColor: $primaryTextColor;
+
+/// Border of a button
+/// @group button
+$buttonBorder: 1px solid $primaryColor;
+
+/// Background of a button in hover state
+/// @group button
+$buttonHoverBg: $primaryDarkColor;
+
+/// Text color of a button in hover state
+/// @group button
+$buttonTextHoverColor: $primaryTextColor;
+
+/// Border color of a button in hover state
+/// @group button
+$buttonHoverBorderColor: $primaryDarkColor;
+
+/// Background of a button in pressed state
+/// @group button
+$buttonActiveBg: $primaryDarkerColor;
+
+/// Color of a button in pressed state
+/// @group button
+$buttonTextActiveColor: $primaryTextColor;
+
+/// Border color of a button in pressed state
+/// @group button
+$buttonActiveBorderColor: $primaryDarkerColor;
+
+/// Shadow of a raised button
+/// @group button
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+/// Border radius of a rounded button
+/// @group button
+$roundedButtonBorderRadius: 2rem;
+
+/// Alpha level of a text button background in hover state
+/// @group button
+$textButtonHoverBgOpacity:.04;
+
+/// Alpha level of a text button background in active state
+/// @group button
+$textButtonActiveBgOpacity:.16;
+
+/// Border style of a outlined button
+/// @group button
+$outlinedButtonBorder:1px solid;
+
+/// Text color of a plain text button
+/// @group button
+$plainButtonTextColor:#6c757d;
+
+/// Background color of a plain text button in hover state
+/// @group button
+$plainButtonHoverBgColor:#e9ecef;
+
+/// Background color of a plain text button in active state
+/// @group button
+$plainButtonActiveBgColor:#dee2e6;
+
+/// Background of a secondary button
+/// @group button
+$secondaryButtonBg: #607D8B;
+
+/// Text color of a secondary button
+/// @group button
+$secondaryButtonTextColor: #ffffff;
+
+/// Border of a secondary button
+/// @group button
+$secondaryButtonBorder: 1px solid #607D8B;
+
+/// Background of a secondary button in hover state
+/// @group button
+$secondaryButtonHoverBg: #546E7A;
+
+/// Text color of a secondary button in hover state
+/// @group button
+$secondaryButtonTextHoverColor: #ffffff;
+
+/// Border color of a secondary button in hover state
+/// @group button
+$secondaryButtonHoverBorderColor: #546E7A;
+
+/// Background of a secondary button in pressed state
+/// @group button
+$secondaryButtonActiveBg: #455A64;
+
+/// Text color of a secondary button in pressed state
+/// @group button
+$secondaryButtonTextActiveColor: #ffffff;
+
+/// Border color of a secondary button in pressed state
+/// @group button
+$secondaryButtonActiveBorderColor: #455A64;
+
+/// Box shadow of a secondary button in focused state
+/// @group button
+$secondaryButtonFocusShadow: 0 0 0 0.2rem #B0BEC5;
+
+/// Background of an info button
+/// @group button
+$infoButtonBg: #03A9F4;
+
+/// Text color of an info button
+/// @group button
+$infoButtonTextColor: #ffffff;
+
+/// Border of an info button
+/// @group button
+$infoButtonBorder: 1px solid #03A9F4;
+
+/// Background of an info button in hover state
+/// @group button
+$infoButtonHoverBg: #039BE5;
+
+/// Text color of an info button in hover state
+/// @group button
+$infoButtonTextHoverColor: #ffffff;
+
+/// Border color of an info button in hover state
+/// @group button
+$infoButtonHoverBorderColor: #039BE5;
+
+/// Background of an info button in pressed state
+/// @group button
+$infoButtonActiveBg: #0288D1;
+
+/// Text color of an info button in pressed state
+/// @group button
+$infoButtonTextActiveColor: #ffffff;
+
+/// Border color of an info button in pressed state
+/// @group button
+$infoButtonActiveBorderColor: #0288D1;
+
+/// Box shadow of an info button in focused state
+/// @group button
+$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);
+
+/// Background of a success button
+/// @group button
+$successButtonBg: #4CAF50;
+
+/// Text color of a success button
+/// @group button
+$successButtonTextColor: #ffffff;
+
+/// Border of a success button
+/// @group button
+$successButtonBorder: 1px solid #4CAF50;
+
+/// Background of a success button in hover state
+/// @group button
+$successButtonHoverBg: #43A047;
+
+/// Text color of a success button in hover state
+/// @group button
+$successButtonTextHoverColor: #ffffff;
+
+/// Border color of a success button in hover state
+/// @group button
+$successButtonHoverBorderColor: #43A047;
+
+/// Background of a success button in pressed state
+/// @group button
+$successButtonActiveBg: #388E3C;
+
+/// Text Color of a success button in pressed state
+/// @group button
+$successButtonTextActiveColor: #ffffff;
+
+/// Border color of a success button in pressed state
+/// @group button
+$successButtonActiveBorderColor: #388E3C;
+
+/// Box shadow of a success button in focused state
+/// @group button
+$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);
+
+/// Background of a warning button
+/// @group button
+$warningButtonBg: #FFC107;
+
+/// Text color of a warning button
+/// @group button
+$warningButtonTextColor: $textColor;
+
+/// Border of a warning button
+/// @group button
+$warningButtonBorder: 1px solid #FFC107;
+
+/// Background of a warning button in hover state
+/// @group button
+$warningButtonHoverBg: #FFB300;
+
+/// Text color of a warning button in hover state
+/// @group button
+$warningButtonTextHoverColor: $textColor;
+
+/// Border color of a warning button in hover state
+/// @group button
+$warningButtonHoverBorderColor: #FFB300;
+
+/// Background of a warning button in pressed state
+/// @group button
+$warningButtonActiveBg: #FFA000;
+
+/// Text color of a warning button in pressed state
+/// @group button
+$warningButtonTextActiveColor: $textColor;
+
+/// Border color of a warning button in pressed state
+/// @group button
+$warningButtonActiveBorderColor: #FFA000;
+
+/// Box shadow of a warning button in focused state
+/// @group button
+$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);
+
+/// Background of a help button
+/// @group button
+$helpButtonBg:#9C27B0;
+
+/// Text color of a help button
+/// @group button
+$helpButtonTextColor:#ffffff;
+
+/// Border of a help button
+/// @group button
+$helpButtonBorder:1px solid #9C27B0;
+
+/// Background of a help help in hover state
+/// @group button
+$helpButtonHoverBg:#8E24AA;
+
+/// Text color of a help button in hover state
+/// @group button
+$helpButtonTextHoverColor:#ffffff;
+
+/// Border color of a help button in hover state
+/// @group button
+$helpButtonHoverBorderColor:#8E24AA;
+
+/// Background of a help button in pressed state
+/// @group button
+$helpButtonActiveBg:#7B1FA2;
+
+/// Text color of a help button in pressed state
+/// @group button
+$helpButtonTextActiveColor:#ffffff;
+
+/// Border color of a help button in pressed state
+/// @group button
+$helpButtonActiveBorderColor:#7B1FA2;
+
+/// Box shadow of a help button in focused state
+/// @group button
+$helpButtonFocusShadow:0 0 0 0.2rem #CE93D8;
+
+/// Background of a danger button
+/// @group button
+$dangerButtonBg: #f44336;
+
+/// Text color of a danger button
+/// @group button
+$dangerButtonTextColor: #ffffff;
+
+/// Border of a danger button
+/// @group button
+$dangerButtonBorder: 1px solid #f44336;
+
+/// Background of a danger button in hover state
+/// @group button
+$dangerButtonHoverBg: #e53935;
+
+/// Text color of a danger button in hover state
+/// @group button
+$dangerButtonTextHoverColor: #ffffff;
+
+/// Border color of a danger button in hover state
+/// @group button
+$dangerButtonHoverBorderColor: #e53935;
+
+/// Background of a danger button in pressed state
+/// @group button
+$dangerButtonActiveBg: #d32f2f;
+
+/// Text color of a danger button in pressed state
+/// @group button
+$dangerButtonTextActiveColor: #ffffff;
+
+/// Border color of a danger button in pressed state
+/// @group button
+$dangerButtonActiveBorderColor: #d32f2f;
+
+/// Box shadow of a danger button in focused state
+/// @group button
+$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);
+
+/// Text color of a link button
+/// @group button
+$linkButtonColor:$primaryDarkerColor;
+
+/// Text color of a link button in hover state
+/// @group button
+$linkButtonHoverColor:$primaryDarkerColor;
+
+/// Text decoration of a link button in hover state
+/// @group button
+$linkButtonTextHoverDecoration:underline;
+
+/// Box shadow of a link button in focused state
+/// @group button
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;
+
+/// Background of a toggle button
+/// @group button
+$toggleButtonBg: #ffffff;
+
+/// Border of a toggle button
+/// @group button
+$toggleButtonBorder: 1px solid #ced4da;
+
+/// Text color of a toggle button
+/// @group button
+$toggleButtonTextColor: $textColor;
+
+/// Icon color of a toggle button
+/// @group button
+$toggleButtonIconColor: $textSecondaryColor;
+
+/// Background of a toggle button in hover state
+/// @group button
+$toggleButtonHoverBg: #e9ecef;
+
+/// Border color of a toggle button in hover state
+/// @group button
+$toggleButtonHoverBorderColor: #ced4da;
+
+/// Text color of a toggle button in hover state
+/// @group button
+$toggleButtonTextHoverColor: $textColor;
+
+/// Icon color of a toggle button in hover state
+/// @group button
+$toggleButtonIconHoverColor: $textSecondaryColor;
+
+/// Background of a toggle button in selected state
+/// @group button
+$toggleButtonActiveBg: $primaryColor;
+
+/// Border color of a toggle button in selected state
+/// @group button
+$toggleButtonActiveBorderColor: $primaryColor;
+
+/// Text color of a toggle button in selected state
+/// @group button
+$toggleButtonTextActiveColor: $primaryTextColor;
+
+/// Icon color of a toggle button in selected state
+/// @group button
+$toggleButtonIconActiveColor: $primaryTextColor;
+
+/// Hover background of a toggle button in selected state
+/// @group button
+$toggleButtonActiveHoverBg: $primaryDarkColor;
+
+/// Hover border color of a toggle button in selected state
+/// @group button
+$toggleButtonActiveHoverBorderColor: $primaryDarkColor;
+
+/// Hover text color of a toggle button in selected state
+/// @group button
+$toggleButtonTextActiveHoverColor: $primaryTextColor;
+
+/// Hover icon of a toggle button in selected state
+/// @group button
+$toggleButtonIconActiveHoverColor: $primaryTextColor;
+
+/// Width of a floating action button on speed dial
+/// @group button
+$speedDialButtonWidth: 4rem;
+
+/// Height of a floating action button on speed dial
+/// @group button
+$speedDialButtonHeight: 4rem;
+
+/// Font Size of a floating action button on speed dial
+/// @group button
+$speedDialButtonIconFontSize: 1.3rem;
+
+/// Width of any action button on speed dial
+/// @group button
+$speedDialActionWidth: 3rem;
+
+/// Height of any action button on speed dial
+/// @group button
+$speedDialActionHeight: 3rem;
+
+/// Background color of any action button on speed dial 
+/// @group button
+$speedDialActionBg: #495057;
+
+/// Background color of any action button on speed dial in hover state
+/// @group button
+$speedDialActionHoverBg: #343a40;
+
+/// Color of any action button on speed dial 
+/// @group button
+$speedDialActionTextColor: #fff;
+
+/// Color of any action button on speed dial in hover state
+/// @group button
+$speedDialActionTextHoverColor: #fff;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_data.scss b/themes/mytheme/variables/_data.scss
new file mode 100644
index 0000000..fdbff66
--- /dev/null
+++ b/themes/mytheme/variables/_data.scss
@@ -0,0 +1,366 @@
+/// Background of a paginator
+/// @group data
+$paginatorBg: #ffffff;
+
+/// Text color of a paginator
+/// @group data
+$paginatorTextColor: $textSecondaryColor;
+
+/// Border of a paginator
+/// @group data
+$paginatorBorder: solid #e9ecef;
+
+/// Border width of a paginator
+/// @group data
+$paginatorBorderWidth: 0;
+
+/// Padding of a paginator
+/// @group data
+$paginatorPadding: .5rem 1rem;
+
+/// Width of a paginator element
+/// @group data
+$paginatorElementWidth: $buttonIconOnlyWidth;
+
+/// Height of a paginator element
+/// @group data
+$paginatorElementHeight: $buttonIconOnlyWidth;
+
+/// Background of a paginator element
+/// @group data
+$paginatorElementBg: transparent;
+
+/// Border of a paginator element
+/// @group data
+$paginatorElementBorder: 0 none;
+
+/// Icon color of a paginator element
+/// @group data
+$paginatorElementIconColor: $textSecondaryColor;
+
+/// Background of a paginator element in hover state
+/// @group data
+$paginatorElementHoverBg: #e9ecef;
+
+/// Border color of a paginator element in hover state
+/// @group data
+$paginatorElementHoverBorderColor: transparent;
+
+/// Icon color of a paginator element in hover state
+/// @group data
+$paginatorElementIconHoverColor: $textSecondaryColor;
+
+/// Border radius of a paginator element
+/// @group data
+$paginatorElementBorderRadius: $borderRadius;
+
+/// Margin of a paginator element
+/// @group data
+$paginatorElementMargin: .143rem;
+
+/// Padding of a paginator element
+/// @group data
+$paginatorElementPadding: 0;
+
+/// Border of a table header
+/// @group data
+$tableHeaderBorder: 1px solid #e9ecef;
+
+/// Border width of a table header
+/// @group data
+$tableHeaderBorderWidth: 0 0 1px 0;
+
+/// Background of a table header
+/// @group data
+$tableHeaderBg: #f8f9fa;
+
+/// Text color of a table header
+/// @group data
+$tableHeaderTextColor: $textColor;
+
+/// Font weight of a table header
+/// @group data
+$tableHeaderFontWeight: 600;
+
+/// Padding of a table header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group data
+$tableHeaderPadding: 1rem 1rem;
+
+/// Padding of a table header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group data
+$tableHeaderCellPadding: 1rem 1rem;
+
+/// Background of a table header cell
+/// @group data
+$tableHeaderCellBg: #f8f9fa;
+
+/// Text color of a table header cell
+/// @group data
+$tableHeaderCellTextColor: $textColor;
+
+/// Font weight of a table header cell
+/// @group data
+$tableHeaderCellFontWeight: 600;
+
+/// Border of a table header cell
+/// @group data
+$tableHeaderCellBorder: 1px solid #e9ecef;
+
+/// Border width of a table header cell
+/// @group data
+$tableHeaderCellBorderWidth: 0 0 1px 0;
+
+/// Background of a table header cell in hover state
+/// @group data
+$tableHeaderCellHoverBg: #e9ecef;
+
+/// Text color of a table header cell in hover state
+/// @group data
+$tableHeaderCellTextHoverColor: $textColor;
+
+/// Icon color of a table header cell
+/// @group data
+$tableHeaderCellIconColor: $textSecondaryColor;
+
+/// Icon color of a table header cell in hover state
+/// @group data
+$tableHeaderCellIconHoverColor: $textSecondaryColor;
+
+/// Background of a table header cell in sorted state
+/// @group data
+$tableHeaderCellHighlightBg:#f8f9fa;
+
+/// Text color of a table header cell in sorted state
+/// @group data
+$tableHeaderCellHighlightTextColor:$primaryColor;
+
+/// Hover background of a table header cell in sorted state
+/// @group data
+$tableHeaderCellHighlightHoverBg:#e9ecef;
+
+/// Hover text color of a table header cell in sorted state
+/// @group data
+$tableHeaderCellHighlightTextHoverColor:$primaryColor;
+
+/// Size of a multiple column sorting order indicator
+/// @group data
+$tableSortableColumnBadgeSize: 1.143rem;
+
+/// Background of a table body row
+/// @group data
+$tableBodyRowBg: #ffffff;
+
+/// Text color of a table body row
+/// @group data
+$tableBodyRowTextColor: $textColor;
+
+/// Background of an even table body row
+/// @group data
+$tableBodyRowEvenBg: #ffffff;
+
+/// Background of a table body row in hover state
+/// @group data
+$tableBodyRowHoverBg: #e9ecef;
+
+/// Text color of a table body row in hover state
+/// @group data
+$tableBodyRowTextHoverColor: $textColor;
+
+/// Border for a cell of a table toby row
+/// @group data
+$tableBodyCellBorder: 1px solid rgba(0,0,0,0.08);
+
+/// Border width for a cell of a table toby row
+/// @group data
+$tableBodyCellBorderWidth: 0 0 1px 0;
+
+/// Padding for a cell of a table toby row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group data
+$tableBodyCellPadding: 1rem 1rem;
+
+/// Padding of a table footer cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group data
+$tableFooterCellPadding: 1rem 1rem;
+
+/// Background of a table footer cell
+/// @group data
+$tableFooterCellBg: #f8f9fa;
+
+/// Text color of a table footer cell
+/// @group data
+$tableFooterCellTextColor: $textColor;
+
+/// Font weight of a table footer cell
+/// @group data
+$tableFooterCellFontWeight: 600;
+
+/// Border of a table footer cell
+/// @group data
+
+/// Border of a table footer cell
+/// @group data
+$tableFooterCellBorder: 1px solid #e9ecef;
+
+/// Border width of a table footer cell
+/// @group data
+$tableFooterCellBorderWidth: 0 0 1px 0;
+
+/// Background of a table column resize indicator bar
+/// @group data
+$tableResizerHelperBg: $primaryColor;
+
+/// Background of drag helper used for multiple row selection
+/// @group data
+$tableDragHelperBg: rgba($primaryColor, .16);
+
+/// Border of a table footer
+/// @group data
+$tableFooterBorder: 1px solid #e9ecef;
+
+/// Border width of a table footer
+/// @group data
+$tableFooterBorderWidth: 0 0 1px 0;
+
+/// Background of a table footer
+/// @group data
+$tableFooterBg: #f8f9fa;
+
+/// Text color of a table footer
+/// @group data
+$tableFooterTextColor: $textColor;
+
+/// Font weight of a table footer
+/// @group data
+$tableFooterFontWeight: 600;
+
+/// Padding of a table footer, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group data
+$tableFooterPadding: 1rem 1rem;
+
+/// Content alignment of a table cell
+/// @group data
+$tableCellContentAlignment: left;
+
+/// Border width of a table paginator positioned at top
+/// @group data
+$tableTopPaginatorBorderWidth: 1px 0 1px 0;
+
+/// Border width of a table paginator positioned at bottom
+/// @group data
+$tableBottomPaginatorBorderWidth: 0 0 1px 0;
+
+/// Scale factor of a small datatable
+/// @group data
+$tableScaleSM: 0.5;
+
+/// Scale factor of a large datatable
+/// @group data
+$tableScaleLG: 1.25;
+
+/// Padding for content section of a dataview
+/// @group data
+$dataViewContentPadding: 0;
+
+/// Border for content section of a dataview
+/// @group data
+$dataViewContentBorder: 0 none;
+
+/// Border for an item of a dataview in list orientation
+/// @group data
+$dataViewListItemBorder: solid #e9ecef;
+
+/// Border width for an item of a dataview in list orientation
+/// @group data
+$dataViewListItemBorderWidth: 0 0 1px 0;
+
+/// Padding for content section of a datascroller
+/// @group data
+$dataScrollerContentPadding: 0;
+
+/// Border for content section of a datascroller
+/// @group data
+$dataScrollerContentBorder: 0 none;
+
+/// Border for an item of a datascroller
+/// @group data
+$dataScrollerListItemBorder: solid #e9ecef;
+
+/// Border width for an item of a datascroller
+/// @group data
+$dataScrollerListItemBorderWidth: 0 0 1px 0;
+
+/// Background of a full calendar event
+/// @group data
+$fullCalendarEventBg: $primaryDarkColor;
+
+/// Border color of a full calendar event
+/// @group data
+$fullCalendarEventBorderColor: $primaryDarkColor;
+
+/// Border of a full calendar event
+/// @group data
+$fullCalendarEventBorder: 1px solid $primaryDarkColor;
+
+/// Text color of a full calendar event
+/// @group data
+$fullCalendarEventTextColor: $primaryTextColor;
+
+/// Padding of a tree
+/// @group data
+$treeContainerPadding: 0.286rem;
+
+/// Padding of a tree node
+/// @group data
+$treeNodePadding: 0.143rem;
+
+/// Padding of a tree node content consists of toggler, icon and label
+/// @group data
+$treeNodeContentPadding: .5rem;
+
+/// Padding of a tree node children container
+/// @group data
+$treeNodeChildrenPadding: 0 0 0 1rem;
+
+/// Color of a treenode data icon, $dataActionIconColor for the toggler element
+/// @group data
+$treeNodeIconColor: $textSecondaryColor;
+
+/// Padding of a vertical timeline content element
+/// @group data
+$timelineVerticalEventContentPadding:0 1rem;
+
+/// Padding of a horizontal timeline content element
+/// @group data
+$timelineHorizontalEventContentPadding:1rem 0;
+
+/// Width of a timeline marker
+/// @group data
+$timelineEventMarkerWidth:1rem;
+
+/// Height of a timeline marker
+/// @group data
+$timelineEventMarkerHeight:1rem;
+
+/// Border radius of a timeline marker
+/// @group data
+$timelineEventMarkerBorderRadius:50%;
+
+/// Border of a timeline marker
+/// @group data
+$timelineEventMarkerBorder:2px solid $highlightBg;
+
+/// Background of a timeline marker
+/// @group data
+$timelineEventMarkerBackground:$highlightTextColor;
+
+/// Size of a timeline connector
+/// @group data
+$timelineEventConnectorSize:2px;
+
+/// Color of a timeline event
+/// @group data
+$timelineEventColor:#dee2e6;
+
+/// Color of a line to connect to organization chart nodes
+/// @group data
+$organizationChartConnectorColor: #dee2e6;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_form.scss b/themes/mytheme/variables/_form.scss
new file mode 100644
index 0000000..cd32790
--- /dev/null
+++ b/themes/mytheme/variables/_form.scss
@@ -0,0 +1,552 @@
+/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group form
+$inputPadding: .5rem .5rem;
+
+/// Background of an input field
+/// @group form
+$inputBg: #ffffff;
+
+/// Font size of an input field
+/// @group form
+$inputTextFontSize: 1rem;
+
+/// Text color of an input field
+/// @group form
+$inputTextColor: $textColor;
+
+/// Color of an icon inside an input field
+/// @group form
+$inputIconColor: $textColor;
+
+/// Border of an input field
+/// @group form
+$inputBorder: 1px solid #ced4da;
+
+/// Border of an input field in hover state
+/// @group form
+$inputHoverBorderColor: $primaryColor;
+
+/// Border of an input field in focus state
+/// @group form
+$inputFocusBorderColor: $primaryColor;
+
+/// Color of an input field in invalid state
+/// @group form
+$inputErrorBorderColor: #ced4da #ced4da #ced4da $errorColor;
+
+/// Text color of a placeholder
+/// @group form
+$inputPlaceholderTextColor: #6c757d;
+
+/// Background of a filled input
+/// @group form
+$inputFilledBg:#f8f9fa;
+
+/// Background of a filled input in hover state
+/// @group form
+$inputFilledHoverBg:#f8f9fa;
+
+/// Background of a filled input in focus state
+/// @group form
+$inputFilledFocusBg:#f8f9fa;
+
+/// Backgroud color of an input group addon
+/// @group form
+$inputGroupBg: #e9ecef;
+
+/// Text color of an input group addon
+/// @group form
+$inputGroupTextColor: $textSecondaryColor;
+
+/// Minimum width of an input group addon
+/// @group form
+$inputGroupAddOnMinWidth: 2.357rem;
+
+/// Background of an input list such as dropdown, listbox, multiselect
+/// @group form
+$inputListBg: #ffffff;
+
+/// Text color of an input list
+/// @group form
+$inputListTextColor: $textColor;
+
+/// Border of an input list
+/// @group form
+$inputListBorder: $inputBorder;
+
+/// Padding of an input list
+/// @group form
+$inputListPadding: .5rem 0;
+
+/// Padding for an individual itrem of an input list
+/// @group form
+$inputListItemPadding: .5rem 1rem;
+
+/// Background for an individual itrem of an input list
+/// @group form
+$inputListItemBg: transparent;
+
+/// Text color for an individual itrem of an input list
+/// @group form
+$inputListItemTextColor: $textColor;
+
+/// Hover state background for an individual itrem of an input list
+/// @group form
+$inputListItemHoverBg: #e9ecef;
+
+/// Hover state text color for an individual itrem of an input list
+/// @group form
+$inputListItemTextHoverColor: $textColor;
+
+/// Border for an individual itrem of an input list
+/// @group form
+$inputListItemBorder: 0 none;
+
+/// Border radius for an individual itrem of an input list
+/// @group form
+$inputListItemBorderRadius: 0;
+
+/// Margin for an individual itrem of an input list
+/// @group form
+$inputListItemMargin: 0;
+
+/// Box shadow for an individual itrem of an input list in focused state
+/// @group form
+$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;
+
+/// Padding for a header of an input list
+/// @group form
+$inputListHeaderPadding: .5rem 1rem;
+
+/// Margin for a header of an input list
+/// @group form
+$inputListHeaderMargin: 0;
+
+/// Background for a header of an input list
+/// @group form
+$inputListHeaderBg: #f8f9fa;
+
+/// Text color for a header of an input list
+/// @group form
+$inputListHeaderTextColor: $textColor;
+
+/// Border for a header of an input list
+/// @group form
+$inputListHeaderBorder: 0 none;
+
+
+/// Background for an overlay of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayBg:$inputListBg;
+
+/// Background for an overlay header of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayHeaderBg:$inputListHeaderBg;
+
+/// Border for an overlay of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayBorder: 0 none;
+
+/// Shadow for an overlay of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+
+/// Width of a checkbox
+/// @group form
+$checkboxWidth: 20px;
+
+/// Height of a checkbox
+/// @group form
+$checkboxHeight: 20px;
+
+/// Border of a checkbox
+/// @group form
+$checkboxBorder: 2px solid #ced4da;
+
+/// Size of a checkbox icon
+/// @group form
+$checkboxIconFontSize: 14px;
+
+/// Border color of a selected checkbox
+/// @group form
+$checkboxActiveBorderColor: $primaryColor;
+
+/// Background of a selected checkbox
+/// @group form
+$checkboxActiveBg: $primaryColor;
+
+/// Icon color of a selected checkbox
+/// @group form
+$checkboxIconActiveColor: $primaryTextColor;
+
+/// Background of a selected checkbox in hover state
+/// @group form
+$checkboxActiveHoverBg: $primaryDarkerColor;
+
+/// Icon color of a selected checkbox in hover state
+/// @group form
+$checkboxIconActiveHoverColor: $primaryTextColor;
+
+/// Border color of a selected checkbox in hover state
+/// @group form
+$checkboxActiveHoverBorderColor: $primaryDarkerColor;
+
+/// Width of a radiobutton
+/// @group form
+$radiobuttonWidth: 20px;
+
+/// Height of a radiobutton
+/// @group form
+$radiobuttonHeight: 20px;
+
+/// Border of a radiobutton
+/// @group form
+$radiobuttonBorder: 2px solid #ced4da;
+
+/// Font size of a radiobutton icon
+/// @group form
+$radiobuttonIconSize: 12px;
+
+/// Border color of a selected radiobutton
+/// @group form
+$radiobuttonActiveBorderColor: $primaryColor;
+
+/// Background of a selected radiobutton
+/// @group form
+$radiobuttonActiveBg: $primaryColor;
+
+/// Icon color of a selected radiobutton
+/// @group form
+$radiobuttonIconActiveColor: $primaryTextColor;
+
+/// Background of a selected radiobutton in hover state
+/// @group form
+$radiobuttonActiveHoverBg: $primaryDarkerColor;
+
+/// Icon color of a selected radiobutton in hover state
+/// @group form
+$radiobuttonIconActiveHoverColor: $primaryTextColor;
+
+/// Border color of a selected radiobutton in hover state
+/// @group form
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor;
+
+/// Width of a color picker preview element
+/// @group form
+$colorPickerPreviewWidth: 2rem;
+
+/// Height of a color picker preview element
+/// @group form
+$colorPickerPreviewHeight: 2rem;
+
+/// Background of a color picker
+/// @group form
+$colorPickerBg: #323232;
+
+/// Border color of a color picker
+/// @group form
+$colorPickerBorder: 1px solid #191919;
+
+/// Handle color of a color picker
+/// @group form
+$colorPickerHandleColor: #ffffff;
+
+/// Font size of a rating icon
+/// @group form
+$ratingIconFontSize: 1.143rem;
+
+/// Icon color for the cancel icon of a rating
+/// @group form
+$ratingCancelIconColor: #e74c3c;
+
+/// Hover icon color for the cancel icon of a rating
+/// @group form
+$ratingCancelIconHoverColor: #c0392b;
+
+/// Icon color for the star icon of a rating in unselected state
+/// @group form
+$ratingStarIconOffColor: $textColor;
+
+/// Icon color for the star icon of a rating in selected state
+/// @group form
+$ratingStarIconOnColor: $primaryColor;
+
+/// Icon color for the star icon of a rating in hover state
+/// @group form
+$ratingStarIconHoverColor: $primaryColor;
+
+/// Background of a slider
+/// @group form
+$sliderBg: #dee2e6;
+
+/// Border of a slider
+/// @group form
+$sliderBorder: 0 none;
+
+/// Height of a horizontal slider
+/// @group form
+$sliderHorizontalHeight: .286rem;
+
+/// Width of a vertical slider
+/// @group form
+$sliderVerticalWidth: 0.286rem;
+
+/// Width of a slider handle
+/// @group form
+$sliderHandleWidth: 1.143rem;
+
+/// Height of a slider handle
+/// @group form
+$sliderHandleHeight: 1.143rem;
+
+/// Background of a slider handle
+/// @group form
+$sliderHandleBg: #ffffff;
+
+/// Border of a slider handle
+/// @group form
+$sliderHandleBorder: 2px solid $primaryColor;
+
+/// Border radius of a slider handle
+/// @group form
+$sliderHandleBorderRadius: 50%;
+
+/// Border of a slider handle in hover state
+/// @group form
+$sliderHandleHoverBorderColor: $primaryColor;
+
+/// Background of a slider handle in hover state
+/// @group form
+$sliderHandleHoverBg: $primaryColor;
+
+/// Background color of a range slider
+/// @group form
+$sliderRangeBg: $primaryColor;
+
+/// Margin of a calendar table
+/// @group form
+$calendarTableMargin: .5rem 0;
+
+/// Margin of a calendar
+/// @group form
+$calendarPadding: .5rem;
+
+/// Background of a calendar
+/// @group form
+$calendarBg:#ffffff;
+
+/// Background of an inlime calendar
+/// @group form
+$calendarInlineBg:$calendarBg;
+
+/// Text color of a calendar
+/// @group form
+$calendarTextColor: $textColor;
+
+/// Border of an inline calendar
+/// @group form
+$calendarBorder: $inputListBorder;
+
+/// Border of an overlay calendar
+/// @group form
+$calendarOverlayBorder: $inputOverlayBorder;
+
+/// Padding of a calendar header
+/// @group form
+$calendarHeaderPadding: .5rem;
+
+/// Text color of current month and year text in hover state
+/// @group form
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+/// Background of a calendar header
+/// @group form
+$calendarHeaderBg: #ffffff;
+
+/// Background of an inline calendar header
+/// @group form
+$calendarInlineHeaderBg:$calendarBg;
+
+/// Border of a calendar header
+/// @group form
+$calendarHeaderBorder: 1px solid #dee2e6;
+
+/// Text color of a calendar header
+/// @group form
+$calendarHeaderTextColor: $textColor;
+
+/// Font weight of a calendar header
+/// @group form
+$calendarHeaderFontWeight: 600;
+
+/// Padding of a calendar weekday cell
+/// @group form
+$calendarHeaderCellPadding: .5rem;
+
+/// Padding of a calendar date cell
+/// @group form
+$calendarCellDatePadding: .5rem;
+
+/// Width of a calendar date cell
+/// @group form
+$calendarCellDateWidth: 2.5rem;
+
+/// Height of a calendar date cell
+/// @group form
+$calendarCellDateHeight: 2.5rem;
+
+/// Border radius of a calendar date cell
+/// @group form
+$calendarCellDateBorderRadius: 50%;
+
+/// Border of a calendar date cell
+/// @group form
+$calendarCellDateBorder:1px solid transparent;
+
+/// Background of a calendar date cell in hover state
+/// @group form
+$calendarCellDateHoverBg: #e9ecef;
+
+/// Background of a calendar date cell indicating today
+/// @group form
+$calendarCellDateTodayBg: #ced4da;
+
+/// Border color of a calendar date cell indicating today
+/// @group form
+$calendarCellDateTodayBorderColor: transparent;
+
+/// Text color of a calendar date cell indicating today
+/// @group form
+$calendarCellDateTodayTextColor: $textColor;
+
+/// Padding of the calendar button bar
+/// @group form
+$calendarButtonBarPadding: 1rem 0;
+
+/// Padding of a time picker container of a calendar
+/// @group form
+$calendarTimePickerPadding: .5rem;
+
+/// Padding of a time picker element of a calendar
+/// @group form
+$calendarTimePickerElementPadding: 0 .429rem;
+
+/// Font size of a time picker element of a calendar
+/// @group form
+$calendarTimePickerTimeFontSize: 1.286rem;
+
+/// Breakpoint of calendar to apply styles for small screens like phones
+/// @group form
+$calendarBreakpoint: 769px;
+
+/// Padding of a calendar date cell on small screens like phones
+/// @group form
+$calendarCellDatePaddingSM: 0;
+
+/// Width of an inputswitch
+/// @group form
+$inputSwitchWidth: 3rem;
+
+/// Height of an inputswitch
+/// @group form
+$inputSwitchHeight: 1.75rem;
+
+/// Border radius of an inputswitch
+/// @group form
+$inputSwitchBorderRadius: 30px;
+
+/// Width of an inputswitch handle
+/// @group form
+$inputSwitchHandleWidth: 1.250rem;
+
+/// Height of an inputswitch handle
+/// @group form
+$inputSwitchHandleHeight: 1.250rem;
+
+/// Border radius of an inputswitch handle
+/// @group form
+$inputSwitchHandleBorderRadius: 50%;
+
+/// Padding of an inputswitch slider
+/// @group form
+$inputSwitchSliderPadding: .25rem;
+
+/// Background color of an inputswitch slider when unselected
+/// @group form
+$inputSwitchSliderOffBg: #ced4da;
+
+/// Background color of an inputswitch handle when unselected
+/// @group form
+$inputSwitchHandleOffBg: #ffffff;
+
+/// Hover background color of an inputswitch slider when unselected
+/// @group form
+$inputSwitchSliderOffHoverBg: #c3cad2;
+
+/// Background color of an inputswitch slider when selected
+/// @group form
+$inputSwitchSliderOnBg: $primaryColor;
+
+/// Hover background color of an inputswitch slider when selected
+/// @group form
+$inputSwitchSliderOnHoverBg: $primaryDarkColor;
+
+/// Background color of an inputswitch handle when selected
+/// @group form
+$inputSwitchHandleOnBg: #ffffff;
+
+/// Height for the progress bar of a fileupload
+/// @group form
+$fileUploadProgressBarHeight: .25rem;
+
+/// Padding of the fileupload content section
+/// @group form
+$fileUploadContentPadding: 2rem 1rem;
+
+/// Background of an editor toolbar
+/// @group form
+$editorToolbarBg:#f8f9fa;
+
+/// Border of an editor toolbar
+/// @group form
+$editorToolbarBorder:1px solid #dee2e6;
+
+/// Padding of an editor toolbar
+/// @group form
+$editorToolbarPadding:1rem;
+
+/// Icon color of an editor toolbar
+/// @group form
+$editorToolbarIconColor:#6c757d;
+
+/// Icon color of an editor toolbar in hover state
+/// @group form
+$editorToolbarIconHoverColor:#495057;
+
+/// Icon color of an editor toolbar in active state
+/// @group form
+$editorIconActiveColor:$primaryColor;
+
+/// Border of an editor content
+/// @group form
+$editorContentBorder: 1px solid #dee2e6;
+
+/// Background of an editor content
+/// @group form
+$editorContentBg:#ffffff;
+
+/// Background of a password meter
+/// @group form
+$passwordMeterBg:#dee2e6;
+
+/// Background of a week password
+/// @group form
+$passwordWeakBg:#E53935;
+
+/// Background of a medium password
+/// @group form
+$passwordMediumBg:#FFB300;
+
+/// Background of a strong password
+/// @group form
+$passwordStrongBg:#43A047;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_general.scss b/themes/mytheme/variables/_general.scss
new file mode 100644
index 0000000..483521b
--- /dev/null
+++ b/themes/mytheme/variables/_general.scss
@@ -0,0 +1,135 @@
+/// Font of the theme
+/// @group general
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+/// Size of the font
+/// @group general
+$fontSize: 1rem;
+
+/// Thickness of the texts
+/// @group general
+$fontWeight: normal;
+
+/// Primary text color
+/// @group general
+$textColor: #495057;
+
+/// Secondary text color
+/// @group general
+$textSecondaryColor: #6c757d;
+
+/// Background of a highlighted item
+/// @group general
+$highlightBg: $primaryColor;
+
+/// Text color of a highlighted item
+/// @group general
+$highlightTextColor: $primaryTextColor;
+
+/// Radius of the corners
+/// @group general
+$borderRadius: 3px;
+
+/// Duration of the property transitions
+/// @group general
+$transitionDuration: .2s;
+
+/// Properties of a form element transition
+/// @group general
+$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+
+/// Properties of a action icon transition
+/// @group general
+$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration;
+
+/// Properties of a list item transition
+/// @group general
+$listItemTransition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
+
+/// Size of the Icons
+/// @group general
+$primeIconFontSize: 1rem;
+
+/// Separator border
+/// @group general
+$divider: 1px solid #dee2e6;
+
+/// Space between two inline items
+/// @group general
+$inlineSpacing: .5rem;
+
+/// Opacity of the disabled elements
+/// @group general
+$disabledOpacity: .8;
+
+/// Background of the modal layer
+/// @group general
+$maskBg: rgba(0, 0, 0, 0.4);
+
+/// Font size of the loading icons
+/// @group general
+$loadingIconFontSize: 2rem;
+
+/// Color to use on an invalid element e.g. invalid input
+/// @group general
+$errorColor: #e4677e;
+
+/// Outline color of a focused element
+/// @group general
+$focusOutlineColor: #bfd1f6;
+
+/// Outline of a focused element
+/// @group general
+$focusOutline: 0 none;
+
+/// Outline offset of a focused element
+/// @group general
+$focusOutlineOffset: 0;
+
+/// Box shadow of a focused element
+/// @group general
+$focusShadow: 0 0 0 0.2rem $focusOutlineColor;
+
+/// Width of an action icon
+/// @group general
+$actionIconWidth: 2rem;
+
+/// Height of an action icon
+/// @group general
+$actionIconHeight: 2rem;
+
+/// Background of an action icon
+/// @group general
+$actionIconBg: transparent;
+
+/// Border of an action icon
+/// @group general
+$actionIconBorder: 0 none;
+
+/// Color of an action icon
+/// @group general
+$actionIconColor: $textSecondaryColor;
+
+/// Backgroun of an action icon in hover state
+/// @group general
+$actionIconHoverBg: #e9ecef;
+
+/// Border of an action icon in hover state
+/// @group general
+$actionIconHoverBorderColor: transparent;
+
+/// Color of an action icon in hover state
+/// @group general
+$actionIconHoverColor: $textColor;
+
+/// Border radius of an action icon
+/// @group general
+$actionIconBorderRadius: 50%;
+
+/// Scale factor of small component size
+/// @group general
+$scaleSM:0.875;
+
+/// Scale factor of small large size
+/// @group general
+$scaleLG:1.25;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_media.scss b/themes/mytheme/variables/_media.scss
new file mode 100644
index 0000000..f4a537b
--- /dev/null
+++ b/themes/mytheme/variables/_media.scss
@@ -0,0 +1,231 @@
+/// Padding of a carousel indicators container
+/// @group media
+$carouselIndicatorsPadding: 1rem;
+
+/// Padding of a carousel indicator
+/// @group media
+$carouselIndicatorBg: #e9ecef;
+
+/// Padding of a carousel indicator in hover state
+/// @group media
+$carouselIndicatorHoverBg: #dee2e6;
+
+/// Border radius of a carousel indicator
+/// @group media
+$carouselIndicatorBorderRadius: 0;
+
+/// Width of a carousel indicator
+/// @group media
+$carouselIndicatorWidth: 2rem;
+
+/// Height of a carousel indicator
+/// @group media
+$carouselIndicatorHeight: .5rem;
+
+/// Background of a galleria modal
+/// @group media
+$galleriaMaskBg: rgba(0,0,0,0.9);
+
+/// Margin of a galleria close icon
+/// @group media
+$galleriaCloseIconMargin: .5rem;
+
+/// Font size of a galleria close icon
+/// @group media
+$galleriaCloseIconFontSize: 2rem;
+
+/// Background of a galleria close icon
+/// @group media
+$galleriaCloseIconBg: transparent;
+
+/// Color of a galleria close icon
+/// @group media
+$galleriaCloseIconColor: #ebedef;
+
+/// Background of a galleria close icon in hover state
+/// @group media
+$galleriaCloseIconHoverBg: rgba(255,255,255,0.1);
+
+/// Color of a galleria close icon in hover state
+/// @group media
+$galleriaCloseIconHoverColor: #ebedef;
+
+/// Width of a galleria close icon
+/// @group media
+$galleriaCloseIconWidth: 4rem;
+
+/// Height of a galleria close icon
+/// @group media
+$galleriaCloseIconHeight: 4rem;
+
+/// Border radius of a galleria close icon
+/// @group media
+$galleriaCloseIconBorderRadius: 50%;
+
+/// Background of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorBg: rgba(0,0,0,.2);
+
+/// Color of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorColor: #aeb6bf;
+
+/// Margin of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorMargin: .5rem 0;
+
+/// Font size of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorFontSize: 2rem;
+
+/// Background of a galleria navigator item in hover state
+/// @group media
+$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3);
+
+/// Color of a galleria navigator item in hover state
+/// @group media
+$galleriaItemNavigatorHoverColor: #ebedef;
+
+/// Width of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorWidth: 4rem;
+
+/// Height of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorHeight: 4rem;
+
+/// Border radius of a galleria navigator item
+/// @group media
+$galleriaItemNavigatorBorderRadius: $borderRadius;
+
+/// Background of a galleria caption
+/// @group media
+$galleriaCaptionBg: rgba(0,0,0,.5);
+
+/// Color of a galleria caption
+/// @group media
+$galleriaCaptionTextColor: #ebedef;
+
+/// Padding of a galleria caption
+/// @group media
+$galleriaCaptionPadding: 1rem;
+
+/// Padding of a galleria indicators container
+/// @group media
+$galleriaIndicatorsPadding: 1rem;
+
+/// Background of a galleria indicator
+/// @group media
+$galleriaIndicatorBg: #e9ecef;
+
+/// Background of a galleria indicator in hover state
+/// @group media
+$galleriaIndicatorHoverBg: #dee2e6;
+
+/// Border radius of a galleria indicator
+/// @group media
+$galleriaIndicatorBorderRadius: 50%;
+
+/// Width of a galleria indicator
+/// @group media
+$galleriaIndicatorWidth: 1rem;
+
+/// Height of a galleria indicator
+/// @group media
+$galleriaIndicatorHeight: 1rem;
+
+/// Background of a galleria indicator container when placed inside the viewport
+/// @group media
+$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5);
+
+/// Background of a galleria indicator when placed inside the viewport
+/// @group media
+$galleriaIndicatorBgOnItem: rgba(255,255,255,.4);
+
+/// Background of a galleria indicator in hover state when placed inside the viewport
+/// @group media
+$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6);
+
+/// Background of a galleria thumbnail container
+/// @group media
+$galleriaThumbnailContainerBg: rgba(0,0,0,.9);
+
+/// Padding of a galleria thumbnail container
+/// @group media
+$galleriaThumbnailContainerPadding: 1rem .25rem;
+
+/// Background of a galleria thumbnail navigator
+/// @group media
+$galleriaThumbnailNavigatorBg: transparent;
+
+/// Color of a galleria thumbnail navigator
+/// @group media
+$galleriaThumbnailNavigatorColor: #aeb6bf;
+
+/// Background of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1);
+
+/// Color of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf;
+
+/// Border radius of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorBorderRadius: 50%;
+
+/// Width of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorWidth: 2rem;
+
+/// Height of a galleria thumbnail navigator in hover state
+/// @group media
+$galleriaThumbnailNavigatorHeight: 2rem;
+
+/// Background of an image preview modal
+/// @group media
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+
+/// Padding of image preview toolbar
+/// @group media
+$imagePreviewToolbarPadding:1rem !default;
+
+/// Text color of the image preview indicator
+/// @group media
+$imagePreviewIndicatorColor:#f8f9fa !default;
+
+/// Background of the image preview indicator
+/// @group media
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+
+/// Background of an image action item
+/// @group media
+$imagePreviewActionIconBg:transparent !default;
+
+/// Text color of an image action item
+/// @group media
+$imagePreviewActionIconColor:#f8f9fa !default;
+
+/// Background of an image action item in hover state
+/// @group media
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+
+/// Tect color of an image action item in hover state
+/// @group media
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+
+/// Width of an image action item
+/// @group media
+$imagePreviewActionIconWidth:3rem !default;
+
+/// Height of an image action item
+/// @group media
+$imagePreviewActionIconHeight:3rem !default;
+
+/// Font size of an image action item icon
+/// @group media
+$imagePreviewActionIconFontSize:1.5rem !default;
+
+/// Border radius of an image action item
+/// @group media
+$imagePreviewActionIconBorderRadius:50% !default;
diff --git a/themes/mytheme/variables/_menu.scss b/themes/mytheme/variables/_menu.scss
new file mode 100644
index 0000000..19de042
--- /dev/null
+++ b/themes/mytheme/variables/_menu.scss
@@ -0,0 +1,267 @@
+/// Background of a steps item
+/// @group menu
+$stepsItemBg: #ffffff;
+
+/// Border of a steps item
+/// @group menu
+$stepsItemBorder: 1px solid #c8c8c8;
+
+/// Text color of a steps item
+/// @group menu
+$stepsItemTextColor: $textSecondaryColor;
+
+/// Width of a steps itrem number
+/// @group menu
+$stepsItemNumberWidth: 2rem;
+
+/// Height of a steps itrem number
+/// @group menu
+$stepsItemNumberHeight: 2rem;
+
+/// Font size of a steps itrem number
+/// @group menu
+$stepsItemNumberFontSize: 1.143rem;
+
+/// Color of a steps itrem number
+/// @group menu
+$stepsItemNumberColor: $textColor;
+
+/// Border radius of a steps itrem number
+/// @group menu
+$stepsItemNumberBorderRadius: 50%;
+
+/// Font weight of an active steps itrem number
+/// @group menu
+$stepsItemActiveFontWeight: 600;
+
+/// Width of a vertical menu such as tieredmenu or context menu
+/// @group menu
+$menuWidth: 12.5rem;
+
+/// Background of a menu
+/// @group menu
+$menuBg: #ffffff;
+
+/// Border of a menu
+/// @group menu
+$menuBorder: 1px solid #dee2e6;
+
+/// Text color of a menu
+/// @group menu
+$menuTextColor: $textColor;
+
+/// Padding of a menuitem
+/// @group menu
+$menuitemPadding: .75rem 1rem;
+
+/// Border radius of a menuitem
+/// @group menu
+$menuitemBorderRadius: 0;
+
+/// Text color of a menuitem
+/// @group menu
+$menuitemTextColor: $textColor;
+
+/// Icon color of a menuitem
+/// @group menu
+$menuitemIconColor: $textSecondaryColor;
+
+/// Text color of a menuitrem in hover state
+/// @group menu
+$menuitemTextHoverColor: $textColor;
+
+/// Icon color of a menuitrem in hover state
+/// @group menu
+$menuitemIconHoverColor: $textSecondaryColor;
+
+/// Background of a menuitrem in hover state
+/// @group menu
+$menuitemHoverBg: #e9ecef;
+
+/// Text color of a menuitrem in active state
+/// @group menu
+$menuitemTextActiveColor: $textColor;
+
+/// Icon color of a menuitrem in active state
+/// @group menu
+$menuitemIconActiveColor: $textSecondaryColor;
+
+/// Background of a menuitrem in active state
+/// @group menu
+$menuitemActiveBg: #e9ecef;
+
+/// Font size of an icon indicating the itrem has a submenu
+/// @group menu
+$menuitemSubmenuIconFontSize: .875rem;
+
+/// Margin of a submenu header
+/// @group menu
+$submenuHeaderMargin: 0;
+
+/// Padding of a submenu header
+/// @group menu
+$submenuHeaderPadding: .75rem 1rem;
+
+/// Background of a submenu header
+/// @group menu
+$submenuHeaderBg: #ffffff;
+
+/// Text color of a submenu header
+/// @group menu
+$submenuHeaderTextColor: $textColor;
+
+/// Border radius of a submenu header
+/// @group menu
+$submenuHeaderBorderRadius: 0;
+
+/// Font weight of a submenu header
+/// @group menu
+$submenuHeaderFontWeight: 600;
+
+/// Background of an overlay menu
+/// @group menu
+$overlayMenuBg:$menuBg;
+
+/// Border of an overlay menu
+/// @group menu
+$overlayMenuBorder: 0 none;
+
+/// Box shadow of an overlay menu
+/// @group menu
+$overlayMenuShadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+
+/// Padding of a vertical menu e.g. tieredmenu, contextmenu
+/// @group menu
+$verticalMenuPadding: .25rem 0;
+
+/// Margin of a menuitrem separator
+/// @group menu
+$menuSeparatorMargin: .25rem 0;
+
+/// Padding of a breadcrumb
+/// @group menu
+$breadcrumbPadding: 1rem;
+
+/// Background of a breadcrumb
+/// @group menu
+$breadcrumbBg: $menuBg;
+
+/// Border of a breadcrumb
+/// @group menu
+$breadcrumbBorder: $menuBorder;
+
+/// Text color of a breadcrumb item
+/// @group menu
+$breadcrumbItemTextColor: $menuitemTextColor;
+
+/// Icon color of a breadcrumb item
+/// @group menu
+$breadcrumbItemIconColor: $menuitemIconColor;
+
+/// Text color of the breadcrumb item
+/// @group menu
+$breadcrumbLastItemTextColor: $menuitemTextColor;
+
+/// Icon color of the breadcrumb item
+/// @group menu
+$breadcrumbLastItemIconColor: $menuitemIconColor;
+
+/// Color of a breadcrumb separator
+/// @group menu
+$breadcrumbSeparatorColor: $menuitemTextColor;
+
+/// Padding of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuPadding: .5rem;
+
+/// Background of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuBg: #f8f9fa;
+
+/// Border of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuBorder: $menuBorder;
+
+/// Text color of a horizontal menu e.g. menubar
+/// @group menu
+$horizontalMenuTextColor: $menuTextColor;
+
+/// Padding of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemPadding: $menuitemPadding;
+
+/// Border radius of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius;
+
+/// Text color of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor;
+
+/// Icon color of a horizontal menu root item e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor;
+
+/// Text color of a horizontal menu root item in hover state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor;
+
+/// Icon color of a horizontal menu root item in hover state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor;
+
+/// Background of a horizontal menu root item in hover state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg;
+
+/// Text color of a horizontal menu root item in hover active e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor;
+
+/// Icon color of a horizontal menu root item in hover active e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor;
+
+/// Background of a horizontal menu root item in active state e.g. menubar
+/// @group menu
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg;
+
+/// Width of an action item on dock
+/// @group menu
+$dockActionWidth: 4rem;
+
+/// Height of an action item on dock
+/// @group menu
+$dockActionHeight: 4rem;
+
+/// Padding of an action item on dock
+/// @group menu
+$dockItemPadding: .5rem;
+
+/// Margin of the current action item on dock
+/// @group menu
+$dockCurrentItemMargin: 1.5rem;
+
+/// Margin of the previous and next action item on dock
+/// @group menu
+$dockFirstItemsMargin: 1.3rem;
+
+/// Margin of the second previous and second next action item on dock
+/// @group menu
+$dockSecondItemsMargin: 0.9rem;
+
+/// Background of the list on dock
+/// @group menu
+$dockBg: rgba(255,255,255,.1);
+
+/// Border of the list on dock
+/// @group menu
+$dockBorder: 1px solid rgba(255,255,255,0.2);
+
+/// Padding of the list on dock
+/// @group menu
+$dockPadding: .5rem .5rem;
+
+/// Border Radius of the list on dock
+/// @group menu
+$dockBorderRadius: .5rem;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_message.scss b/themes/mytheme/variables/_message.scss
new file mode 100644
index 0000000..a5246df
--- /dev/null
+++ b/themes/mytheme/variables/_message.scss
@@ -0,0 +1,143 @@
+/// Margin of a message
+/// @group message
+$messageMargin: 1rem 0;
+
+/// Padding of a message
+/// @group message
+$messagePadding: 1rem 1.5rem;
+
+/// Border width of a message
+/// @group message
+$messageBorderWidth: 0 0 0 4px;
+
+/// Font size of a message icon
+/// @group message
+$messageIconFontSize: 1.5rem;
+
+/// Font size of a message text
+/// @group message
+$messageTextFontSize: 1rem;
+
+/// Font weight of a message text
+/// @group message
+$messageTextFontWeight: 500;
+
+/// Padding of an inline message
+/// @group message
+$inlineMessagePadding: $inputPadding;
+
+/// Margin of an inline message
+/// @group message
+$inlineMessageMargin: 0;
+
+/// Font size of an inline message icon
+/// @group message
+$inlineMessageIconFontSize: 1rem;
+
+/// Padding of an inline message text
+/// @group message
+$inlineMessageTextFontSize: 1rem;
+
+/// Border width of an inline message text
+/// @group message
+$inlineMessageBorderWidth: 1px;
+
+/// Font size of a toast message icon
+/// @group message
+$toastIconFontSize: 2rem;
+
+/// Margin of a toast message text
+/// @group message
+$toastMessageTextMargin: 0 0 0 1rem;
+
+/// Margin of a toast message
+/// @group message
+$toastMargin: 0 0 1rem 0;
+
+/// Padding of a toast message
+/// @group message
+$toastPadding: 1rem;
+
+/// Border width of a toast message
+/// @group message
+$toastBorderWidth: 0 0 0 4px;
+
+/// Box shadow of a toast message
+/// @group message
+$toastShadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3);
+
+/// Opacity of a toast message
+/// @group message
+$toastOpacity: .9;
+
+/// Font weight of a toast message title text
+/// @group message
+$toastTitleFontWeight: 700;
+
+/// Margin of a toast message detail text
+/// @group message
+$toastDetailMargin: $inlineSpacing 0 0 0;
+
+/// Background of an info message
+/// @group message
+$infoMessageBg: #039BE5;
+
+/// Border of an info message
+/// @group message
+$infoMessageBorder: solid #027cb7;
+
+/// Text color of an info message
+/// @group message
+$infoMessageTextColor: #ffffff;
+
+/// Icon color of an info message
+/// @group message
+$infoMessageIconColor: #ffffff;
+
+/// Background of a success message
+/// @group message
+$successMessageBg: #43A047;
+
+/// Border of a success message
+/// @group message
+$successMessageBorder: 0 none;
+
+/// Text color of a success message
+/// @group message
+$successMessageTextColor: #ffffff;
+
+/// Icon color of a success message
+/// @group message
+$successMessageIconColor: #ffffff;
+
+/// Background of a warning message
+/// @group message
+$warningMessageBg: #FFB300;
+
+/// Border of a warning message
+/// @group message
+$warningMessageBorder: 0 none;
+
+/// Text color of a warning message
+/// @group message
+$warningMessageTextColor: $textColor;
+
+/// Icon color of a warning message
+/// @group message
+$warningMessageIconColor: $textColor;
+
+/// Background of an error message
+/// @group message
+$errorMessageBg: #E53935;
+
+/// Border of an error message
+/// @group message
+$errorMessageBorder: 0 none;
+
+/// Text color of an error message
+/// @group message
+$errorMessageTextColor: #ffffff;
+
+/// Icon color of an error message
+/// @group message
+$errorMessageIconColor: #ffffff;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_misc.scss b/themes/mytheme/variables/_misc.scss
new file mode 100644
index 0000000..6e7ac74
--- /dev/null
+++ b/themes/mytheme/variables/_misc.scss
@@ -0,0 +1,114 @@
+/// Padding of an inplace element
+/// @group misc
+$inplacePadding: $inputPadding;
+
+/// Background of an inplace element in hover state
+/// @group misc
+$inplaceHoverBg: #e9ecef;
+
+/// Text color of an inplace element in hover state
+/// @group misc
+$inplaceTextHoverColor: $textColor;
+
+/// Background of a badge
+/// @group misc
+$badgeBg: $primaryColor;
+
+/// Text color of a badge
+/// @group misc
+$badgeTextColor: $primaryTextColor;
+
+/// Minimum width of a badge
+/// @group misc
+$badgeMinWidth: 1.5rem;
+
+/// Height of a badge
+/// @group misc
+$badgeHeight: 1.5rem;
+
+/// Font weight of a badge
+/// @group misc
+$badgeFontWeight: 700;
+
+/// Font size of a badge
+/// @group misc
+$badgeFontSize: .75rem;
+
+/// Padding of a badge
+/// @group misc
+$tagPadding: .25rem .4rem;
+
+/// Height of a progress bar
+/// @group misc
+$progressBarHeight: 1.5rem;
+
+/// Border of a progress bar
+/// @group misc
+$progressBarBorder: 0 none;
+
+/// Background of a progress bar
+/// @group misc
+$progressBarBg: #dee2e6;
+
+/// Background of a progress bar value
+/// @group misc
+$progressBarValueBg: $primaryColor;
+
+/// @group misc
+$progressBarValueTextColor:$primaryTextColor;
+
+// Background of an avatar
+/// @group misc
+$avatarBg:#dee2e6;
+
+/// Text color of an avatar
+/// @group misc
+$avatarTextColor:$textColor;
+
+/// Background of a chip
+/// @group misc
+$chipBg:#dee2e6;
+
+/// Text color of a chip
+/// @group misc
+$chipTextColor:$textColor;
+
+/// Border radius of a chip
+/// @group misc
+$chipBorderRadius:16px;
+
+/// Background of a scrollTop
+/// @group misc
+$scrollTopBg:rgba(0,0,0,0.7);
+
+/// Background of a scrollTop in hover state
+/// @group misc
+$scrollTopHoverBg:rgba(0,0,0,0.8);
+
+/// Width of a scrollTop
+/// @group misc
+$scrollTopWidth:3rem;
+
+/// Height of a scrollTop
+/// @group misc
+$scrollTopHeight:3rem;
+
+/// Border radius of a scrollTop
+/// @group misc
+$scrollTopBorderRadius:50%;
+
+/// Font size of a scrollTop
+/// @group misc
+$scrollTopFontSize:1.5rem;
+
+/// Text color of a scrollTop
+/// @group misc
+$scrollTopTextColor:#f8f9fa;
+
+/// Background of a skeleton
+/// @group misc
+$skeletonBg:#e9ecef;
+
+/// Background of a skeleton animation
+/// @group misc
+$skeletonAnimationBg:rgba(255,255,255,0.4);
diff --git a/themes/mytheme/variables/_overlay.scss b/themes/mytheme/variables/_overlay.scss
new file mode 100644
index 0000000..45b2b88
--- /dev/null
+++ b/themes/mytheme/variables/_overlay.scss
@@ -0,0 +1,67 @@
+/// Border of an overlay container element such as dialog or overlaypanel
+/// @group overlay
+$overlayContentBorder: 0 none;
+
+/// Background of an overlay container element such as dialog or overlaypanel
+/// @group overlay
+$overlayContentBg:$panelContentBg;
+
+/// Box shadow of an overlay container element such as dialog or overlaypanel
+/// @group overlay
+$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
+
+/// Background of a dialog header
+/// @group overlay
+$dialogHeaderBg: #ffffff;
+
+/// Border of a dialog header
+/// @group overlay
+$dialogHeaderBorder: 1px solid #dee2e6;
+
+/// Text color of a dialog header
+/// @group overlay
+$dialogHeaderTextColor: $panelHeaderTextColor;
+
+/// Font weight of a dialog header
+/// @group overlay
+$dialogHeaderFontWeight: 600;
+
+/// Font size of a dialog header
+/// @group overlay
+$dialogHeaderFontSize: 1.25rem;
+
+/// Padding of a dialog header
+/// @group overlay
+$dialogHeaderPadding: 1.5rem;
+
+/// Padding of a dialog content
+/// @group overlay
+$dialogContentPadding: 0 1.5rem;
+
+/// Border of a dialog footer
+/// @group overlay
+$dialogFooterBorder: 1px solid #dee2e6;
+
+/// Padding of a dialog footer
+/// @group overlay
+$dialogFooterPadding: 1.5rem;
+
+/// Padding of a confirmpopup content
+/// @group overlay
+$confirmPopupContentPadding:$panelContentPadding;
+
+/// Padding of a confirmpopup footer
+/// @group overlay
+$confirmPopupFooterPadding:0 1rem 1rem 1rem;
+
+/// Background of a tooltip
+/// @group overlay
+$tooltipBg: $textColor;
+
+/// Text color of a tooltip
+/// @group overlay
+$tooltipTextColor: #ffffff;
+
+/// Padding of a tooltip
+/// @group overlay
+$tooltipPadding: $inputPadding;
\ No newline at end of file
diff --git a/themes/mytheme/variables/_panel.scss b/themes/mytheme/variables/_panel.scss
new file mode 100644
index 0000000..7b23975
--- /dev/null
+++ b/themes/mytheme/variables/_panel.scss
@@ -0,0 +1,327 @@
+/// Border color of a panel header
+/// @group panel
+$panelHeaderBorderColor: #dee2e6;
+
+/// Border of a panel header
+/// @group panel
+$panelHeaderBorder: 1px solid #dee2e6;
+
+/// Background of a panel header
+/// @group panel
+$panelHeaderBg: #f8f9fa;
+
+/// Text color of a panel header
+/// @group panel
+$panelHeaderTextColor: $textColor;
+
+/// Font weight of a panel header
+/// @group panel
+$panelHeaderFontWeight: 600;
+
+/// Padding of a panel header
+/// @group panel
+$panelHeaderPadding: 1rem;
+
+/// Font weight of a toggleable panel header
+/// @group panel
+$panelToggleableHeaderPadding: .5rem 1rem;
+
+/// Background of a panel header in hover state e.g. toggleable state
+/// @group panel
+$panelHeaderHoverBg: #e9ecef;
+
+/// Border color of a panel header in hover state e.g. toggleable state
+/// @group panel
+$panelHeaderHoverBorderColor: #dee2e6;
+
+/// Text color of a panel header in hover state e.g. toggleable state
+/// @group panel
+$panelHeaderTextHoverColor: #495057;
+
+/// Border color for the content section of a panel
+/// @group panel
+$panelContentBorderColor: #dee2e6;
+
+/// Border for the content section of a panel
+/// @group panel
+$panelContentBorder: 1px solid #dee2e6;
+
+/// Background for the content section of a panel
+/// @group panel
+$panelContentBg: #ffffff;
+
+/// Background for the striped row.
+/// @group panel
+$panelContentEvenRowBg: #e9ecef;
+
+/// Text color for the content section of a panel
+/// @group panel
+$panelContentTextColor: $textColor;
+
+/// Padding for the content section of a panel
+/// @group panel
+$panelContentPadding: 1rem;
+
+/// Border for the footer section of a panel
+/// @group panel
+$panelFooterBorder: 1px solid #dee2e6;
+
+/// Background for the footer section of a panel
+/// @group panel
+$panelFooterBg: #ffffff;
+
+/// Text color for the footer section of a panel
+/// @group panel
+$panelFooterTextColor: $textColor;
+
+/// Padding for the footer section of a panel
+/// @group panel
+$panelFooterPadding: 0.5rem 1rem;
+
+/// Spacing between to accordion panels
+/// @group panel
+$accordionSpacing: 0;
+
+/// Border of an accordion panel header
+/// @group panel
+$accordionHeaderBorder: $panelHeaderBorder;
+
+/// Background of an accordion panel header
+/// @group panel
+$accordionHeaderBg: $panelHeaderBg;
+
+/// Text color of an accordion panel header
+/// @group panel
+$accordionHeaderTextColor: $panelHeaderTextColor;
+
+/// Font weight of an accordion panel header
+/// @group panel
+$accordionHeaderFontWeight: $panelHeaderFontWeight;
+
+/// Padding of an accordion panel header
+/// @group panel
+$accordionHeaderPadding: $panelHeaderPadding;
+
+/// Background of an accordion panel header in hover state
+/// @group panel
+$accordionHeaderHoverBg: #e9ecef;
+
+/// Border of an accordion panel header in hover state
+/// @group panel
+$accordionHeaderHoverBorderColor: $panelHeaderBorder;
+
+/// Text color of an accordion panel header in hover state
+/// @group panel
+$accordionHeaderTextHoverColor: $textColor;
+
+/// Background of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveBg: $panelHeaderBg;
+
+/// Border of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveBorderColor: #dee2e6;
+
+/// Text color of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderTextActiveColor: $textColor;
+
+/// Hover background of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveHoverBg: #e9ecef;
+
+/// Hover border of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveHoverBorderColor: #dee2e6;
+
+/// Text color of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderTextActiveHoverColor: $textColor;
+
+/// Border for a content section of an accordion panel
+/// @group panel
+$accordionContentBorder: $panelContentBorder;
+
+/// Background for a content section of an accordion panel
+/// @group panel
+$accordionContentBg: $panelContentBg;
+
+/// Text color for a content section of an accordion panel
+/// @group panel
+$accordionContentTextColor: $panelContentTextColor;
+
+/// Padding for a content section of an accordion panel
+/// @group panel
+$accordionContentPadding: $panelContentPadding;
+
+/// Border for a parent element containing all the headers of a tabview
+/// @group panel
+$tabviewNavBorder: 1px solid #dee2e6;
+
+/// Border width for a parent element containing all the headers of a tabview
+/// @group panel
+$tabviewNavBorderWidth: 0 0 2px 0;
+
+/// Background for a parent element containing all the headers of a tabview
+/// @group panel
+$tabviewNavBg: #ffffff;
+
+/// Spacing between tabview headers
+/// @group panel
+$tabviewHeaderSpacing: 0;
+
+/// Border of a tabview header
+/// @group panel
+$tabviewHeaderBorder: solid #dee2e6;
+
+/// Border width of a tabview header
+/// @group panel
+$tabviewHeaderBorderWidth: 0 0 2px 0;
+
+/// Border color of a tabview header
+/// @group panel
+$tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;
+
+/// Background of a tabview header
+/// @group panel
+$tabviewHeaderBg: #ffffff;
+
+/// Text color of a tabview header
+/// @group panel
+$tabviewHeaderTextColor: $textSecondaryColor;
+
+/// Font weight of a tabview header
+/// @group panel
+$tabviewHeaderFontWeight: $panelHeaderFontWeight;
+
+/// Padding of a tabview header
+/// @group panel
+$tabviewHeaderPadding: $panelHeaderPadding;
+
+/// Margin of a tabview header
+/// @group panel
+$tabviewHeaderMargin: 0 0 -2px 0;
+
+/// Background of a tabview header in hover state
+/// @group panel
+$tabviewHeaderHoverBg: #ffffff;
+
+/// Border of a tabview header in hover state
+/// @group panel
+$tabviewHeaderHoverBorderColor: #9ba2aa;
+
+/// Text color of a tabview header in hover state
+/// @group panel
+$tabviewHeaderTextHoverColor: $textSecondaryColor;
+
+/// Background of a tabview header in selected state
+/// @group panel
+$tabviewHeaderActiveBg: #ffffff;
+
+/// Border of a tabview header in selected state
+/// @group panel
+$tabviewHeaderActiveBorderColor: $primaryColor;
+
+/// Text color of a tabview header in selected state
+/// @group panel
+$tabviewHeaderTextActiveColor: $primaryColor;
+
+/// Border for content section of a tabview tab
+/// @group panel
+$tabviewContentBorder: 0 none;
+
+/// Background for content section of a tabview tab
+/// @group panel
+$tabviewContentBg: $panelContentBg;
+
+/// Text color for a content section of a tabview tab
+/// @group panel
+$tabviewContentTextColor: $panelContentTextColor;
+
+/// Padding for a content section of a tabview tab
+/// @group panel
+$tabviewContentPadding: $panelContentPadding;
+
+/// Background of a fieldset header in hover state
+/// @group panel
+$panelHeaderHoverBg: #e9ecef;
+
+/// Border of a fieldset header in hover state
+/// @group panel
+$panelHeaderHoverBorderColor: #dee2e6;
+
+/// Text color of a fieldset header in hover state
+/// @group panel
+$panelHeaderTextHoverColor: $textColor;
+
+/// Border for a track bar of a scroll panel
+/// @group panel
+$scrollPanelTrackBorder: 0 none;
+
+/// Background for a track bar of a scroll panel
+/// @group panel
+$scrollPanelTrackBg: #f8f9fa;
+
+/// Padding of a card body
+/// @group panel
+$cardBodyPadding: 1rem;
+
+/// Font size of a card title
+/// @group panel
+$cardTitleFontSize: 1.5rem;
+
+/// Font weight of a card title
+/// @group panel
+$cardTitleFontWeight: 700;
+
+/// Font size of a card subtitle
+/// @group panel
+$cardSubTitleFontWeight: 700;
+
+/// Text color of a card subtitle
+/// @group panel
+$cardSubTitleColor: $textSecondaryColor;
+
+/// Padding of a card content
+/// @group panel
+$cardContentPadding: 1rem 0;
+
+/// Padding of a card footer
+/// @group panel
+$cardFooterPadding: 1rem 0 0 0;
+
+/// Box shadow of a card
+/// @group panel
+$cardShadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);
+
+/// Margin of divider in horizontal layout
+/// @group panel
+$dividerHorizontalMargin:1rem 0;
+
+/// Padding of divider in horizontal layout
+/// @group panel
+$dividerHorizontalPadding:0 1rem;
+
+/// Margin of divider in vertical layout
+/// @group panel
+$dividerVerticalMargin:0 1rem;
+
+/// Padding of divider in vertical layout
+/// @group panel
+$dividerVerticalPadding:1rem 0;
+
+/// Border width of the divider
+/// @group panel
+$dividerSize:1px;
+
+/// Color of the divider border
+/// @group panel
+$dividerColor:#dee2e6;
+
+/// Background of the splitter gutter
+/// @group panel
+$splitterGutterBg:#f8f9fa;
+
+/// Background of the splitter gutter handle
+/// @group panel
+$splitterGutterHandleBg:#dee2e6;
\ No newline at end of file
diff --git a/themes/nano/_extensions.scss b/themes/nano/_extensions.scss
new file mode 100644
index 0000000..e69de29
diff --git a/themes/nano/_fonts.scss b/themes/nano/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/nano/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/nano/_variables.scss b/themes/nano/_variables.scss
new file mode 100644
index 0000000..7695059
--- /dev/null
+++ b/themes/nano/_variables.scss
@@ -0,0 +1,885 @@
+$primaryColor: #1174c0 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #44A1D9 !default;
+$highlightTextColor: #ffffff !default;
+
+$colors: (
+    "blue": #1E85D3,
+    "green": #38A958,
+    "yellow": #F0C135,
+    "cyan": #21C1F3,
+    "pink": #D74853,
+    "indigo": #114CC0,
+    "teal": #107D79,
+    "orange": #F08F35,
+    "bluegray": #697077,
+    "purple": #8949F8,
+    "red": #FF2B32,
+    "primary": $primaryColor
+) !default;
+
+//reused color variables
+$shade000:#ffffff !default;    //surface
+$shade100:#f2f4f8 !default;    //header background
+$shade200:#dde1e6 !default;    //hover background
+$shade300:#dee2e6 !default;    //border, divider
+$shade400:#a5acb3 !default;    //input border
+$shade500:#878d96 !default;    //input icon
+$shade600:#697077 !default;    //text secondary color
+$shade700:#343a3f !default;    //text color
+$shade800:#21272a !default;    //unused
+$shade900:#121619 !default;    //unused
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:1px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#d8222f !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:1rem !default;
+$actionIconHeight:1rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade500 !default;
+$actionIconHoverBg:transparent !default;
+$actionIconHoverBorderColor:$shade900 !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.25rem .25rem !default;
+$inputTextFontSize:1rem !default;
+
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade100 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$shade000 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.25rem 0 !default;
+$inputListItemPadding:.25rem .5rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.25rem .5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade700 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade300 !default;
+$passwordWeakBg:#d8222f !default;
+$passwordMediumBg:#f0c135 !default;
+$passwordStrongBg:#207f3b !default;
+
+//button
+$buttonPadding:.25rem .5rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.25rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#697077 !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#107d79 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#207f3b !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#f0c135 !default;
+$warningButtonTextColor:#212529 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#8949f8 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#d8222f !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:14px !default;
+$checkboxHeight:14px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:12px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:14px !default;
+$radiobuttonHeight:14px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:8px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade600 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade700 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#e74c3c !default;
+$ratingCancelIconHoverColor:#c0392b !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.25rem 0 !default;
+$calendarPadding:.25rem !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade700 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade000 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade700 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:1.75rem !default;
+$calendarCellDateHeight:1.75rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade700 !default;
+
+$calendarButtonBarPadding:.5rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:2rem !default; //3->2
+$inputSwitchHeight:1.155rem !default; //1.75->1.155
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:0.825rem !default;
+$inputSwitchHandleHeight:0.825rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.165rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade700 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:.75rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade700 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg:scale-color($shade000, $lightness: -1%) !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:.5rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade700 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade700 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade700 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$shade600 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade200 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade700 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade200 !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade700 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade700 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade200 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade700 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade100 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:1px solid $shade200 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:.25rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade700 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade200 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade200 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade700 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade200 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.25rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$primaryColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#CDF2FB !default;
+$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
+$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$successMessageBg:#D7F8D3 !default;
+$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
+$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$warningMessageBg:#FEF8D6 !default;
+$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
+$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$errorMessageBg:#FDDED2 !default;
+$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
+$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade700 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:.75rem !default;
+$dialogContentPadding:0 .75rem 1rem .75rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 .75rem .75rem .75rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 .5rem .5rem .5rem !default;
+
+//tooltip
+$tooltipBg:$shade700 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:1px solid $shade200 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.5rem .5rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade700 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$shade700 !default;
+$menuitemIconActiveColor:$shade600 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.25rem .5rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade700 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:.5rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:.5rem 0 !default;
+$dividerHorizontalPadding:0 .5rem !default;
+$dividerVerticalMargin:0 .5rem !default;
+$dividerVerticalPadding:.5rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:2rem !default;
+$scrollTopHeight:2rem !default;
+$scrollTopBorderRadius:$borderRadius !default;
+$scrollTopFontSize:1rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade200 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 2.75rem !default;
+$speedDialButtonHeight: 2.75rem !default;
+$speedDialButtonIconFontSize: 1rem !default;
+$speedDialActionWidth: 2.25rem !default;
+$speedDialActionHeight: 2.25rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade800 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade700};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #eff0f0;
+    --surface-100: #dfe0e1;
+    --surface-200: #bfc1c4;
+    --surface-300: #9fa3a6;
+    --surface-400: #7f8489;
+    --surface-500: #5f656b;
+    --surface-600: #4c5156;
+    --surface-700: #393d40;
+    --surface-800: #26282b;
+    --surface-900: #131415;
+    --gray-50: #eff0f0;
+    --gray-100: #dfe0e1;
+    --gray-200: #bfc1c4;
+    --gray-300: #9fa3a6;
+    --gray-400: #7f8489;
+    --gray-500: #5f656b;
+    --gray-600: #4c5156;
+    --gray-700: #393d40;
+    --gray-800: #26282b;
+    --gray-900: #131415;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#f2f4f8;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dee2e6;
+    --surface-hover:#dde1e6;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/nano/theme.scss b/themes/nano/theme.scss
new file mode 100644
index 0000000..cf3089b
--- /dev/null
+++ b/themes/nano/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../designer/_components';
+@import './_extensions';
diff --git a/themes/nova/_variables.scss b/themes/nova/_variables.scss
new file mode 100644
index 0000000..04e94d1
--- /dev/null
+++ b/themes/nova/_variables.scss
@@ -0,0 +1,869 @@
+$colors: (
+    "blue": #106EBE,
+    "green": #56A641,
+    "yellow": #F6BD30,
+    "cyan": #2CACD5,
+    "pink": #D8297D,
+    "indigo": #2C47D5,
+    "teal": #41A694,
+    "orange": #F68F30,
+    "bluegray": #657C8A,
+    "purple": #8378DE,
+    "red": #D82A13,
+    "primary": $primaryColor
+) !default;
+
+//Global
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize: 1rem !default;
+$fontWeight: normal !default;
+$textColor: #333333 !default;
+$textSecondaryColor: #848484 !default;
+$borderRadius: 3px !default;
+$transitionDuration: .2s !default;
+$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: background-color $transitionDuration, box-shadow $transitionDuration !default;
+$primeIconFontSize: 1rem !default;
+$divider: 1px solid #d8dae2 !default;
+$inlineSpacing: .5rem !default; //spacing between inline elements
+$disabledOpacity: .5 !default; //opacity of a disabled item
+$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize: 2rem !default;
+$errorColor: #a80000 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:lighten($primaryColor, 35%) !default;
+$focusOutline: 0 none !default;
+$focusOutlineOffset: 0 !default;
+$focusShadow: 0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: #a6a6a6 !default;
+$actionIconHoverBg: transparent !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $primaryColor !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding: 0.429rem 0.429rem !default;
+$inputTextFontSize: 1rem !default;
+$inputBg: #ffffff !default;
+$inputTextColor: $textColor !default;
+$inputIconColor: $textSecondaryColor !default;
+$inputBorder: 1px solid #a6a6a6 !default;
+$inputHoverBorderColor: #212121 !default;
+$inputFocusBorderColor: $primaryColor !default;
+$inputErrorBorderColor: $errorColor !default;
+$inputPlaceholderTextColor: #666666 !default;
+$inputFilledBg:#f4f4f4 !default;
+$inputFilledHoverBg:#f4f4f4 !default;
+$inputFilledFocusBg:#f4f4f4 !default;
+
+//input groups
+$inputGroupBg: #eaeaea !default;
+$inputGroupTextColor: $textSecondaryColor !default;
+$inputGroupAddOnMinWidth: 2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg: #ffffff !default;
+$inputListTextColor: $textColor !default;
+$inputListBorder: 1px solid #a6a6a6 !default;
+$inputListPadding: 0 !default;
+$inputListItemPadding: 0.429rem 0.857rem !default;
+$inputListItemBg: transparent !default;
+$inputListItemTextColor: $textColor !default;
+$inputListItemHoverBg: #eaeaea !default;
+$inputListItemTextHoverColor: $textColor !default;
+$inputListItemBorder: 0 none !default;
+$inputListItemBorderRadius: 0 !default;
+$inputListItemMargin: 0 !default;
+$inputListItemFocusShadow: inset 0 0 0 .15rem lighten($primaryColor, 35%) !default;
+$inputListHeaderPadding: 0.429rem 0.857rem !default;
+$inputListHeaderMargin: 0 !default;
+$inputListHeaderBg: #ffffff !default;
+$inputListHeaderTextColor: $textColor !default;
+$inputListHeaderBorder: 1px solid #eaeaea !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder: 1px solid #c8c8c8 !default;
+$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//password
+$passwordMeterBg:#eaeaea !default;
+$passwordWeakBg:#e91224 !default;
+$passwordMediumBg:#ffba01 !default;
+$passwordStrongBg:#34A835 !default;
+
+//button
+$buttonPadding: .429rem 1rem !default;
+$buttonIconOnlyWidth: 2.357rem !default;
+$buttonIconOnlyPadding: .429rem 0 !default;
+$buttonBg: $primaryColor !default;
+$buttonTextColor: $primaryTextColor !default;
+$buttonBorder: 1px solid $primaryColor !default;
+$buttonHoverBg: $primaryDarkColor !default;
+$buttonTextHoverColor: $primaryTextColor !default;
+$buttonHoverBorderColor: $primaryDarkColor !default;
+$buttonActiveBg: $primaryDarkerColor !default;
+$buttonTextActiveColor: $primaryTextColor !default;
+$buttonActiveBorderColor: $primaryDarkerColor !default;
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius: 2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:#eaeaea !default;
+$plainButtonActiveBgColor:#d2d2d2 !default;
+
+$secondaryButtonBg: #607D8B !default;
+$secondaryButtonTextColor: #ffffff !default;
+$secondaryButtonBorder: 1px solid #607D8B !default;
+$secondaryButtonHoverBg: #546E7A !default;
+$secondaryButtonTextHoverColor: #ffffff !default;
+$secondaryButtonHoverBorderColor: #546E7A !default;
+$secondaryButtonActiveBg: #455A64 !default;
+$secondaryButtonTextActiveColor: #ffffff !default;
+$secondaryButtonActiveBorderColor: #455A64 !default;
+$secondaryButtonFocusShadow: 0 0 0 0.2rem #B0BEC5 !default;
+
+$infoButtonBg: #007ad9 !default;
+$infoButtonTextColor: #ffffff !default;
+$infoButtonBorder: 1px solid #007ad9 !default;
+$infoButtonHoverBg: #116fbf !default;
+$infoButtonTextHoverColor: #ffffff !default;
+$infoButtonHoverBorderColor: #116fbf !default;
+$infoButtonActiveBg: #005b9f !default;
+$infoButtonTextActiveColor: #ffffff !default;
+$infoButtonActiveBorderColor: #005b9f !default;
+$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%) !default;
+
+$successButtonBg: #34A835 !default;
+$successButtonTextColor: #ffffff !default;
+$successButtonBorder: 1px solid #34A835 !default;
+$successButtonHoverBg: #107D11 !default;
+$successButtonTextHoverColor: #ffffff !default;
+$successButtonHoverBorderColor: #107D11 !default;
+$successButtonActiveBg: #0C6B0D !default;
+$successButtonTextActiveColor: #ffffff !default;
+$successButtonActiveBorderColor: #0C6B0D !default;
+$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%) !default;
+
+$warningButtonBg: #ffba01 !default;
+$warningButtonTextColor: $textColor !default;
+$warningButtonBorder: 1px solid #ffba01 !default;
+$warningButtonHoverBg: #ED990B !default;
+$warningButtonTextHoverColor: $textColor !default;
+$warningButtonHoverBorderColor: #ED990B !default;
+$warningButtonActiveBg: #D38B10 !default;
+$warningButtonTextActiveColor: $textColor !default;
+$warningButtonActiveBorderColor: #D38B10 !default;
+$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%) !default;
+
+$helpButtonBg:#9C27B0 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid #9C27B0 !default;
+$helpButtonHoverBg:#8E24AA !default;
+$helpButtonTextHoverColor:#ffffff !default;
+$helpButtonHoverBorderColor:#8E24AA !default;
+$helpButtonActiveBg:#7B1FA2 !default;
+$helpButtonTextActiveColor:#ffffff !default;
+$helpButtonActiveBorderColor:#7B1FA2 !default;
+$helpButtonFocusShadow:0 0 0 0.2rem #CE93D8 !default;
+
+$dangerButtonBg: #e91224 !default;
+$dangerButtonTextColor: #ffffff !default;
+$dangerButtonBorder: 1px solid #e91224 !default;
+$dangerButtonHoverBg: #c01120 !default;
+$dangerButtonTextHoverColor: #ffffff !default;
+$dangerButtonHoverBorderColor: #c01120 !default;
+$dangerButtonActiveBg: #a90000 !default;
+$dangerButtonTextActiveColor: #ffffff !default;
+$dangerButtonActiveBorderColor: #a90000 !default;
+$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder: $inputBorder !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor: $primaryColor !default;
+$checkboxActiveBg: $primaryColor !default;
+$checkboxIconActiveColor: $primaryTextColor !default;
+$checkboxActiveHoverBg: $primaryDarkerColor !default;
+$checkboxIconActiveHoverColor: $primaryTextColor !default;
+$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder: $inputBorder !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor: $primaryColor !default;
+$radiobuttonActiveBg: $primaryColor !default;
+$radiobuttonIconActiveColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth: 2rem !default;
+$colorPickerPreviewHeight: 2rem !default;
+$colorPickerBg: #323232 !default;
+$colorPickerBorder:1px solid  #191919 !default;
+$colorPickerHandleColor: #ffffff !default;
+
+//togglebutton
+$toggleButtonBg: #dadada !default;
+$toggleButtonBorder: 1px solid #dadada !default;
+$toggleButtonTextColor: $textColor !default;
+$toggleButtonIconColor: #666666 !default;
+$toggleButtonHoverBg: #c8c8c8 !default;
+$toggleButtonHoverBorderColor: #c8c8c8 !default;
+$toggleButtonTextHoverColor: $textColor !default;
+$toggleButtonIconHoverColor: #212121 !default;
+$toggleButtonActiveBg: $primaryColor !default;
+$toggleButtonActiveBorderColor: $primaryColor !default;
+$toggleButtonTextActiveColor: $primaryTextColor !default;
+$toggleButtonIconActiveColor: $primaryTextColor !default;
+$toggleButtonActiveHoverBg: $primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor: $primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
+$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
+
+//inplace
+$inplacePadding: $inputPadding !default;
+$inplaceHoverBg: #eaeaea !default;
+$inplaceTextHoverColor: $textColor !default;
+
+//rating
+$ratingIconFontSize: 1.143rem !default;
+$ratingCancelIconColor: #e4018d !default;
+$ratingCancelIconHoverColor: #b5019f !default;
+$ratingStarIconOffColor: $textColor !default;
+$ratingStarIconOnColor: $primaryColor !default;
+$ratingStarIconHoverColor: $primaryColor !default;
+
+//slider
+$sliderBg: #c8c8c8 !default;
+$sliderBorder: 0 none !default;
+$sliderHorizontalHeight: .286rem !default;
+$sliderVerticalWidth: 0.286rem !default;
+$sliderHandleWidth: 1.143rem !default;
+$sliderHandleHeight: 1.143rem !default;
+$sliderHandleBg: #ffffff !default;
+$sliderHandleBorder: 2px solid #666666 !default;
+$sliderHandleBorderRadius: 100% !default;
+$sliderHandleHoverBorderColor: $primaryColor !default;
+$sliderHandleHoverBg: 2px solid #666666 !default;
+$sliderRangeBg: $primaryColor !default;
+
+//calendar
+$calendarTableMargin: 0.857rem 0 !default;
+$calendarPadding: 0.857rem !default;
+$calendarBg: $inputListBg !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor: $inputListTextColor !default;
+$calendarBorder: $inputListBorder !default;
+$calendarOverlayBorder: $inputOverlayBorder !default;
+
+$calendarHeaderPadding: .5rem !default;
+$calendarHeaderBg: $inputListHeaderBg !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder: 0 none !default;
+$calendarHeaderTextColor: $inputListHeaderTextColor !default;
+$calendarHeaderFontWeight: 700 !default;
+$calendarHeaderCellPadding: .5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding: .5rem !default;
+$calendarCellDateWidth: 2.5rem !default;
+$calendarCellDateHeight: 2.5rem !default;
+$calendarCellDateBorderRadius: $borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg: #eaeaea !default;
+$calendarCellDateTodayBg: #d0d0d0 !default;
+$calendarCellDateTodayBorderColor: transparent !default;
+$calendarCellDateTodayTextColor: $textColor !default;
+
+$calendarButtonBarPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerElementPadding: 0 .429rem !default;
+$calendarTimePickerTimeFontSize: 1.286rem !default;
+
+$calendarBreakpoint: 769px !default;
+$calendarCellDatePaddingSM: .25rem !default;
+
+//input switch
+$inputSwitchWidth: 3rem !default;
+$inputSwitchHeight: 1.75rem !default;
+$inputSwitchBorderRadius: 30px !default;
+$inputSwitchHandleWidth: 1.250rem !default;
+$inputSwitchHandleHeight: 1.250rem !default;
+$inputSwitchHandleBorderRadius: 50% !default;
+$inputSwitchSliderPadding: .25rem !default;
+$inputSwitchSliderOffBg: #cccccc !default;
+$inputSwitchHandleOffBg: #ffffff !default;
+$inputSwitchSliderOffHoverBg: #b7b7b7 !default;
+$inputSwitchSliderOnBg: $primaryColor !default;
+$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
+$inputSwitchHandleOnBg: #cccccc !default;
+
+//panel
+$panelHeaderBorderColor:$containerHeaderBorderColor !default;
+$panelHeaderBorder: $containerHeaderBorder !default;
+$panelHeaderBg: $containerHeaderBg !default;
+$panelHeaderTextColor: $containerHeaderTextColor !default;
+$panelHeaderFontWeight: 700 !default;
+$panelHeaderPadding: 0.857rem 1rem !default;
+$panelToggleableHeaderPadding: 0.857rem 1rem !default;
+
+$panelHeaderHoverBg: #dbdbdb !default;
+$panelHeaderHoverBorderColor: #dbdbdb !default;
+$panelHeaderTextHoverColor: $textColor !default;
+
+$panelContentBorderColor: #c8c8c8 !default;
+$panelContentBorder: 1px solid #c8c8c8 !default;
+$panelContentBg: #ffffff !default;
+$panelContentEvenRowBg:#f9f9f9 !default;
+$panelContentTextColor: $textColor !default;
+$panelContentPadding: 0.571rem 1rem !default;
+
+$panelFooterBorder: 1px solid #c8c8c8 !default;
+$panelFooterBg: #ffffff !default;
+$panelFooterTextColor: $textColor !default;
+$panelFooterPadding: 0.571rem 1rem !default;
+
+//accordion
+$accordionSpacing: 2px !default;
+$accordionHeaderBorder: $panelHeaderBorder !default;
+$accordionHeaderBg: $panelHeaderBg !default;
+$accordionHeaderTextColor: $panelHeaderTextColor !default;
+$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
+$accordionHeaderPadding: $panelHeaderPadding !default;
+
+$accordionHeaderHoverBg: #dbdbdb !default;
+$accordionHeaderHoverBorderColor: #dbdbdb !default;
+$accordionHeaderTextHoverColor: $textColor !default;
+
+$accordionHeaderActiveBg: $primaryColor !default;
+$accordionHeaderActiveBorderColor: $primaryColor !default;
+$accordionHeaderTextActiveColor: #ffffff !default;
+
+$accordionHeaderActiveHoverBg: $primaryDarkerColor !default;
+$accordionHeaderActiveHoverBorderColor: $primaryDarkerColor !default;
+$accordionHeaderTextActiveHoverColor: #ffffff !default;
+
+$accordionContentBorder: $panelContentBorder !default;
+$accordionContentBg: $panelContentBg !default;
+$accordionContentTextColor: $panelContentTextColor !default;
+$accordionContentPadding: $panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder: 0 none !default;
+$tabviewNavBorderWidth: 1px !default;
+$tabviewNavBg: transparent !default;
+
+$tabviewHeaderSpacing: 2px !default;
+$tabviewHeaderBorder: $panelHeaderBorder !default;
+$tabviewHeaderBorderWidth: 1px !default;
+$tabviewHeaderBorderColor: $containerHeaderBorderColor !default;
+$tabviewHeaderBg:$panelHeaderBg !default;
+$tabviewHeaderTextColor: $panelHeaderTextColor !default;
+$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
+$tabviewHeaderPadding: $panelHeaderPadding !default;
+$tabviewHeaderMargin: 0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg: #dbdbdb !default;
+$tabviewHeaderHoverBorderColor: #dbdbdb !default;
+$tabviewHeaderTextHoverColor: $textColor !default;
+
+$tabviewHeaderActiveBg: $primaryColor !default;
+$tabviewHeaderActiveBorderColor: $primaryColor !default;
+$tabviewHeaderTextActiveColor: #ffffff !default;
+
+$tabviewContentBorder: $panelContentBorder !default;
+$tabviewContentBg: $panelContentBg !default;
+$tabviewContentTextColor: $panelContentTextColor !default;
+$tabviewContentPadding: $panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight: .25rem !default;
+$fileUploadContentPadding: $panelContentPadding !default;
+
+//scrollpanel
+$scrollPanelTrackBorder: 0 none !default;
+$scrollPanelTrackBg: #f8f8f8 !default;
+
+//card
+$cardBodyPadding: 1rem !default;
+$cardTitleFontSize: 1.5rem !default;
+$cardTitleFontWeight: 700 !default;
+$cardSubTitleFontWeight: 700 !default;
+$cardSubTitleColor: $textSecondaryColor !default;
+$cardContentPadding: 1rem 0 !default;
+$cardFooterPadding: 1rem 0 0 0 !default;
+$cardShadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg: #f4f4f4 !default;
+$paginatorTextColor: $textColor !default;
+$paginatorBorder: solid #c8c8c8 !default;
+$paginatorBorderWidth: 1px !default;
+$paginatorPadding: 0 !default;
+$paginatorElementWidth: $buttonIconOnlyWidth !default;
+$paginatorElementHeight: $buttonIconOnlyWidth !default;
+$paginatorElementBg: transparent !default;
+$paginatorElementBorder: 0 none !default;
+$paginatorElementIconColor: $textSecondaryColor !default;
+$paginatorElementHoverBg: #e0e0e0 !default;
+$paginatorElementHoverBorderColor: transparent !default;
+$paginatorElementIconHoverColor: $textColor !default;
+$paginatorElementBorderRadius: 0 !default;
+$paginatorElementMargin: 0 !default;
+$paginatorElementPadding: 0 !default;
+
+//table
+$tableHeaderBorder: $panelHeaderBorder !default;
+$tableHeaderBorderWidth: 1px 1px 0 1px !default;
+$tableHeaderBg: $panelHeaderBg !default;
+$tableHeaderTextColor: $panelHeaderTextColor !default;
+$tableHeaderFontWeight: $panelHeaderFontWeight !default;
+$tableHeaderPadding: $panelHeaderPadding !default;
+
+$tableHeaderCellPadding: 0.571rem 0.857rem !default;
+$tableHeaderCellBg: #f4f4f4 !default;
+$tableHeaderCellTextColor: $textColor !default;
+$tableHeaderCellFontWeight: 700 !default;
+$tableHeaderCellBorder: 1px solid #c8c8c8 !default;
+$tableHeaderCellBorderWidth: 1px 1px 1px 1px !default;
+$tableHeaderCellHoverBg: #e0e0e0 !default;
+$tableHeaderCellTextHoverColor: $textColor !default;
+$tableHeaderCellIconColor: $textSecondaryColor !default;
+$tableHeaderCellIconHoverColor: $textColor !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize: 1.143rem !default;
+
+$tableBodyRowBg: #ffffff !default;
+$tableBodyRowTextColor: $textColor !default;
+$tableBodyRowEvenBg: #f9f9f9 !default;
+$tableBodyRowHoverBg: #eaeaea !default;
+$tableBodyRowTextHoverColor: $textColor !default;
+$tableBodyCellBorder: 1px solid #c8c8c8 !default;
+$tableBodyCellBorderWidth: 1px !default;
+$tableBodyCellPadding: 0.571rem 0.857rem !default;
+
+$tableFooterCellPadding: 0.571rem 0.857rem !default;
+$tableFooterCellBg: #f4f4f4 !default;
+$tableFooterCellTextColor: $textColor !default;
+$tableFooterCellFontWeight: 700 !default;
+$tableFooterCellBorder: 1px solid #c8c8c8 !default;
+$tableFooterCellBorderWidth: 1px !default;
+$tableResizerHelperBg: $primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder: $panelFooterBorder !default;
+$tableFooterBorderWidth: 0 1px 1px 1px !default;
+$tableFooterBg: $panelFooterBg !default;
+$tableFooterTextColor: $panelFooterTextColor !default;
+$tableFooterFontWeight: normal !default;
+$tableFooterPadding: $panelFooterPadding !default;
+
+$tableCellContentAlignment: left !default;
+$tableTopPaginatorBorderWidth: 1px 1px 0 1px !default;
+$tableBottomPaginatorBorderWidth: 0 1px 1px 1px !default;
+
+$tableScaleSM: 0.85 !default;
+$tableScaleLG: 1.25 !default;
+
+//dataview
+$dataViewContentPadding: 0 !default;
+$dataViewContentBorder: 0 none !default;
+$dataViewListItemBorder: $divider !default;
+$dataViewListItemBorderWidth: 1px !default;
+
+//datascroller
+$dataScrollerContentPadding: 0 !default;
+$dataScrollerContentBorder: 0 none !default;
+$dataScrollerListItemBorder: $divider !default;
+$dataScrollerListItemBorderWidth: 1px !default;
+
+//schedule
+$fullCalendarEventBg: $primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder: 1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor: $primaryTextColor !default;
+
+//tree
+$treeContainerPadding: 0.286rem !default;
+$treeNodePadding: 0.143rem !default;
+$treeNodeContentPadding: 0 !default;
+$treeNodeChildrenPadding: 0 0 0 1rem !default;
+$treeNodeIconColor: $textSecondaryColor !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$highlightBg !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:#c8c8c8 !default;
+
+//org chart
+$organizationChartConnectorColor: #c8c8c8 !default;
+
+//messages
+$messageMargin: 1rem 0 !default;
+$messagePadding: 1rem !default;
+$messageBorderWidth: 0 !default;
+$messageIconFontSize: 1.5rem !default;
+$messageTextFontSize: 1rem !default;
+$messageTextFontWeight: normal !default;
+
+//message
+$inlineMessagePadding: .5rem !default;
+$inlineMessageMargin: 0 !default;
+$inlineMessageIconFontSize: 1rem !default;
+$inlineMessageTextFontSize: 1rem !default;
+$inlineMessageBorderWidth: 0 !default;
+
+//toast
+$toastIconFontSize: 2rem !default;
+$toastMessageTextMargin: 0 0 0 $inlineSpacing !default;
+$toastMargin: 0 0 1rem 0 !default;
+$toastPadding: 1rem !default;
+$toastBorderWidth: 0 !default;
+$toastShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$toastOpacity: .9 !default;
+$toastTitleFontWeight: 700 !default;
+$toastDetailMargin: $inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg: #7fbcec !default;
+$infoMessageBorder: 0 none !default;
+$infoMessageTextColor: #212121 !default;
+$infoMessageIconColor: #212121 !default;
+$successMessageBg: #b7d8b7 !default;
+$successMessageBorder: 0 none !default;
+$successMessageTextColor: #212121 !default;
+$successMessageIconColor: #212121 !default;
+$warningMessageBg: #ffe399 !default;
+$warningMessageBorder: 0 none !default;
+$warningMessageTextColor: #212121 !default;
+$warningMessageIconColor: #212121 !default;
+$errorMessageBg: #f8b7bd !default;
+$errorMessageBorder: 0 none !default;
+$errorMessageTextColor: #212121 !default;
+$errorMessageIconColor: #212121 !default;
+
+//overlays
+$overlayContentBorder: 1px solid #c8c8c8 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow: 0 0 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//dialog
+$dialogHeaderBg: $panelHeaderBg !default;
+$dialogHeaderBorder: $panelHeaderBorder !default;
+$dialogHeaderTextColor: $panelHeaderTextColor !default;
+$dialogHeaderFontWeight: $panelHeaderFontWeight !default;
+$dialogHeaderFontSize: 1rem !default;
+$dialogHeaderPadding: 1rem !default;
+$dialogContentPadding: 1rem !default;
+$dialogFooterBorder: $panelFooterBorder !default;
+$dialogFooterPadding: $panelFooterPadding !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem .571rem 1rem !default;
+
+//tooltip
+$tooltipBg: $textColor !default;
+$tooltipTextColor: #ffffff !default;
+$tooltipPadding: $inputPadding !default;
+
+//steps
+$stepsItemBg: #ffffff !default;
+$stepsItemBorder: 1px solid #dee2e6 !default;
+$stepsItemTextColor: $textSecondaryColor !default;
+$stepsItemNumberWidth: 2rem !default;
+$stepsItemNumberHeight: 2rem !default;
+$stepsItemNumberFontSize: 1.143rem !default;
+$stepsItemNumberColor: $textColor !default;
+$stepsItemNumberBorderRadius: 50% !default;
+$stepsItemActiveFontWeight: 700 !default;
+
+//progressbar
+$progressBarHeight: 24px !default;
+$progressBarBorder: 0 none !default;
+$progressBarBg: #eaeaea !default;
+$progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth: 12.5rem !default;
+$menuBg: #ffffff !default;
+$menuBorder: 1px solid #c8c8c8 !default;
+$menuTextColor: $textColor !default;
+$menuitemPadding: 0.857rem !default;
+$menuitemBorderRadius: 0 !default;
+$menuitemTextColor: $textColor !default;
+$menuitemIconColor: $textColor !default;
+$menuitemTextHoverColor: $textColor !default;
+$menuitemIconHoverColor: $textColor !default;
+$menuitemHoverBg: #eaeaea !default;
+$menuitemTextActiveColor: $textColor !default;
+$menuitemIconActiveColor: $textColor !default;
+$menuitemActiveBg: #eaeaea !default;
+$menuitemSubmenuIconFontSize: .875rem !default;
+$submenuHeaderMargin: 0 !default;
+$submenuHeaderPadding: 0.857rem !default;
+$submenuHeaderBg: #f4f4f4 !default;
+$submenuHeaderTextColor: $textColor !default;
+$submenuHeaderBorderRadius: $borderRadius !default;
+$submenuHeaderFontWeight: 700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder: 1px solid #c8c8c8 !default;
+$overlayMenuShadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$verticalMenuPadding: 0 !default;
+$menuSeparatorMargin: 0 !default;
+
+$breadcrumbPadding: 0.571rem 1rem !default;
+$breadcrumbBg: $menuBg !default;
+$breadcrumbBorder: $menuBorder !default;
+$breadcrumbItemTextColor: $menuitemTextColor !default;
+$breadcrumbItemIconColor: $menuitemIconColor !default;
+$breadcrumbLastItemTextColor: $menuitemTextColor !default;
+$breadcrumbLastItemIconColor: $menuitemIconColor !default;
+$breadcrumbSeparatorColor: $menuitemTextColor !default;
+
+$horizontalMenuPadding: .5rem !default;
+$horizontalMenuBg: $menuBg !default;
+$horizontalMenuBorder: $menuBorder !default;
+$horizontalMenuTextColor: $menuTextColor !default;
+$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg: $primaryColor !default;
+$badgeTextColor: $primaryTextColor !default;
+$badgeMinWidth: 1.5rem !default;
+$badgeHeight: 1.5rem !default;
+$badgeFontWeight: 700 !default;
+$badgeFontSize: .75rem !default;
+
+$tagPadding: .25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding: 1rem !default;
+$carouselIndicatorBg: #f4f4f4 !default;
+$carouselIndicatorHoverBg: #eaeaea !default;
+$carouselIndicatorBorderRadius: 0 !default;
+$carouselIndicatorWidth: 2rem !default;
+$carouselIndicatorHeight: .5rem !default;
+
+//galleria
+$galleriaMaskBg: rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin: .5rem !default;
+$galleriaCloseIconFontSize: 2rem !default;
+$galleriaCloseIconBg: transparent !default;
+$galleriaCloseIconColor: #ebedef !default;
+$galleriaCloseIconHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor: #ebedef !default;
+$galleriaCloseIconWidth: 4rem !default;
+$galleriaCloseIconHeight: 4rem !default;
+$galleriaCloseIconBorderRadius: 50% !default;
+
+$galleriaItemNavigatorBg: rgba(0,0,0,.2) !default;
+$galleriaItemNavigatorColor: #aeb6bf !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize: 2rem !default;
+$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3) !default;
+$galleriaItemNavigatorHoverColor: #ebedef !default;
+$galleriaItemNavigatorWidth: 4rem !default;
+$galleriaItemNavigatorHeight: 4rem !default;
+$galleriaItemNavigatorBorderRadius: $borderRadius !default;
+
+$galleriaCaptionBg: rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor: #ebedef !default;
+$galleriaCaptionPadding: 1rem !default;
+
+$galleriaIndicatorsPadding: 1rem !default;
+$galleriaIndicatorBg: #f4f4f4 !default;
+$galleriaIndicatorHoverBg: #eaeaea !default;
+$galleriaIndicatorBorderRadius: 50% !default;
+$galleriaIndicatorWidth: 1rem !default;
+$galleriaIndicatorHeight: 1rem !default;
+$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem: rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg: rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding: 1rem .25rem !default;
+$galleriaThumbnailNavigatorBg: transparent !default;
+$galleriaThumbnailNavigatorColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorBorderRadius: 50% !default;
+$galleriaThumbnailNavigatorWidth: 2rem !default;
+$galleriaThumbnailNavigatorHeight: 2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:#c8c8c8 !default;
+
+//avatar
+$avatarBg:#c8c8c8 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:#c8c8c8 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:#f4f4f4 !default;
+
+//skeleton
+$skeletonBg:#eaeaea !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:#eaeaea !default;
+$splitterGutterHandleBg:#d8dae2 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: #324249 !default;
+$speedDialActionHoverBg: #222c31 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a: #ffffff;
+    --surface-b: #f4f4f4;
+    --surface-c: #eaeaea;
+    --surface-d: #c8c8c8;
+    --surface-e: #ffffff;
+    --surface-f: #ffffff;
+    --text-color: #333333;
+    --text-color-secondary: #848484;
+    --primary-color: #{$primaryColor};
+    --primary-color-text: #{$primaryTextColor};
+    --font-family: #{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #eef1f2;
+    --surface-100: #dde2e4;
+    --surface-200: #bbc5ca;
+    --surface-300: #98a8af;
+    --surface-400: #768b95;
+    --surface-500: #546e7a;
+    --surface-600: #435862;
+    --surface-700: #324249;
+    --surface-800: #222c31;
+    --surface-900: #111618;
+    --gray-50: #eef1f2;
+    --gray-100: #dde2e4;
+    --gray-200: #bbc5ca;
+    --gray-300: #98a8af;
+    --gray-400: #768b95;
+    --gray-500: #546e7a;
+    --gray-600: #435862;
+    --gray-700: #324249;
+    --gray-800: #222c31;
+    --gray-900: #111618;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#f4f4f4;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#c8c8c8;
+    --surface-hover:#eaeaea;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/nova/_vendor_extensions.scss b/themes/nova/_vendor_extensions.scss
new file mode 100644
index 0000000..5d16675
--- /dev/null
+++ b/themes/nova/_vendor_extensions.scss
@@ -0,0 +1,23 @@
+.p-panel {
+    .p-panel-header {
+        .p-panel-header-icon {
+            color: $containerHeaderIconColor;
+
+            &:enabled:hover {
+                color: $containerHeaderIconHoverColor;
+            }
+        }
+    }
+}
+
+.p-dialog {
+    .p-dialog-header {
+        .p-dialog-header-icon {
+            color: $containerHeaderIconColor;
+
+            &:enabled:hover {
+                color: $containerHeaderIconHoverColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/nova/nova-accent/_extensions.scss b/themes/nova/nova-accent/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/nova/nova-accent/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/nova/nova-accent/_fonts.scss b/themes/nova/nova-accent/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/nova/nova-accent/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/nova/nova-accent/_variables.scss b/themes/nova/nova-accent/_variables.scss
new file mode 100644
index 0000000..e03e6e5
--- /dev/null
+++ b/themes/nova/nova-accent/_variables.scss
@@ -0,0 +1,16 @@
+$primaryColor: #007ad9 !default;
+$primaryDarkColor: #116fbf !default;
+$primaryDarkerColor: #005b9f !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #e02365 !default;
+$highlightTextColor: #ffffff !default;
+
+$containerHeaderBorderColor: $primaryColor !default;
+$containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;
+$containerHeaderBg: $primaryColor !default;
+$containerHeaderTextColor: $primaryTextColor !default;
+$containerHeaderIconColor: $primaryTextColor !default;
+$containerHeaderIconHoverColor: lighten($primaryColor, 25%) !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/nova/nova-accent/_vendor_extensions.scss b/themes/nova/nova-accent/_vendor_extensions.scss
new file mode 100644
index 0000000..4dcaeef
--- /dev/null
+++ b/themes/nova/nova-accent/_vendor_extensions.scss
@@ -0,0 +1,41 @@
+@import '../vendor_extensions';
+
+.p-accordion {
+    .p-accordion-header {
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background-color: #27a0ff;
+                border-color: #27a0ff;
+                color: #ffffff;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: #e02365;
+                border-color: #e02365;
+                color: #ffffff;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    background: #e96694;
+                    border-color: #e96694;
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+}
+
+.p-fieldset {
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            &:hover {
+                background-color: #27a0ff;
+                border-color: #27a0ff;
+                color: #ffffff;
+            }
+        }
+    }
+}
diff --git a/themes/nova/nova-accent/theme.scss b/themes/nova/nova-accent/theme.scss
new file mode 100644
index 0000000..ed53070
--- /dev/null
+++ b/themes/nova/nova-accent/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './vendor_extensions';
+@import './_extensions';
diff --git a/themes/nova/nova-alt/_extensions.scss b/themes/nova/nova-alt/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/nova/nova-alt/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/nova/nova-alt/_fonts.scss b/themes/nova/nova-alt/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/nova/nova-alt/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/nova/nova-alt/_variables.scss b/themes/nova/nova-alt/_variables.scss
new file mode 100644
index 0000000..2d76007
--- /dev/null
+++ b/themes/nova/nova-alt/_variables.scss
@@ -0,0 +1,16 @@
+$primaryColor: #007ad9 !default;
+$primaryDarkColor: #116fbf !default;
+$primaryDarkerColor: #005b9f !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+$containerHeaderBorderColor: #333333 !default;
+$containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;
+$containerHeaderBg: #333333 !default;
+$containerHeaderTextColor: #ffffff !default;
+$containerHeaderIconColor: #ffffff !default;
+$containerHeaderIconHoverColor: #b4b4b4 !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/nova/nova-alt/_vendor_extensions.scss b/themes/nova/nova-alt/_vendor_extensions.scss
new file mode 100644
index 0000000..5d39b0e
--- /dev/null
+++ b/themes/nova/nova-alt/_vendor_extensions.scss
@@ -0,0 +1,25 @@
+@import '../vendor_extensions';
+
+.p-accordion {
+    .p-accordion-header {
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background-color: #494949;
+                border: 1px solid #494949;
+                color: #ffffff;
+            }
+        }
+    }
+}
+
+.p-fieldset {
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            &:hover {
+                background-color: #494949;
+                border-color: #494949;
+                color: #ffffff;
+            }
+        }
+    }
+}
diff --git a/themes/nova/nova-alt/theme.scss b/themes/nova/nova-alt/theme.scss
new file mode 100644
index 0000000..ed53070
--- /dev/null
+++ b/themes/nova/nova-alt/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './vendor_extensions';
+@import './_extensions';
diff --git a/themes/nova/nova-vue/_extensions.scss b/themes/nova/nova-vue/_extensions.scss
new file mode 100644
index 0000000..e46a589
--- /dev/null
+++ b/themes/nova/nova-vue/_extensions.scss
@@ -0,0 +1,3 @@
+@import '../vendor_extensions';
+
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/nova/nova-vue/_fonts.scss b/themes/nova/nova-vue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/nova/nova-vue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/nova/nova-vue/_variables.scss b/themes/nova/nova-vue/_variables.scss
new file mode 100644
index 0000000..060d597
--- /dev/null
+++ b/themes/nova/nova-vue/_variables.scss
@@ -0,0 +1,16 @@
+$primaryColor: #41b883 !default;
+$primaryDarkColor: #318c63 !default;
+$primaryDarkerColor: #246749 !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+$containerHeaderBorderColor: #c8c8c8 !default;
+$containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;
+$containerHeaderBg: #f4f4f4 !default;
+$containerHeaderTextColor: #333333 !default;
+$containerHeaderIconColor: #848484 !default;
+$containerHeaderIconHoverColor: #333333 !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/nova/nova-vue/theme.scss b/themes/nova/nova-vue/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/nova/nova-vue/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/nova/nova/_extensions.scss b/themes/nova/nova/_extensions.scss
new file mode 100644
index 0000000..f5dbaa4
--- /dev/null
+++ b/themes/nova/nova/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/nova/nova/_fonts.scss b/themes/nova/nova/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/nova/nova/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/nova/nova/_variables.scss b/themes/nova/nova/_variables.scss
new file mode 100644
index 0000000..39f19de
--- /dev/null
+++ b/themes/nova/nova/_variables.scss
@@ -0,0 +1,16 @@
+$primaryColor: #007ad9 !default;
+$primaryDarkColor: #116fbf !default;
+$primaryDarkerColor: #005b9f !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+
+$containerHeaderBorderColor: #c8c8c8 !default;
+$containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;
+$containerHeaderBg: #f4f4f4 !default;
+$containerHeaderTextColor: #333333 !default;
+$containerHeaderIconColor: #848484 !default;
+$containerHeaderIconHoverColor: #333333 !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/nova/nova/theme.scss b/themes/nova/nova/theme.scss
new file mode 100644
index 0000000..e0c0c90
--- /dev/null
+++ b/themes/nova/nova/theme.scss
@@ -0,0 +1,5 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import '../vendor_extensions';
+@import './_extensions';
diff --git a/themes/rhea/_extensions.scss b/themes/rhea/_extensions.scss
new file mode 100644
index 0000000..d701376
--- /dev/null
+++ b/themes/rhea/_extensions.scss
@@ -0,0 +1,3 @@
+@import './vendor_extensions';
+
+/* Customizations to the designer theme should be defined here */
\ No newline at end of file
diff --git a/themes/rhea/_fonts.scss b/themes/rhea/_fonts.scss
new file mode 100755
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/rhea/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/rhea/_variables.scss b/themes/rhea/_variables.scss
new file mode 100644
index 0000000..d769ee2
--- /dev/null
+++ b/themes/rhea/_variables.scss
@@ -0,0 +1,885 @@
+$primaryColor: #7B95A3 !default;
+$primaryDarkColor: #6c8999 !default;
+$primaryDarkerColor: #617c8a !default;
+$primaryTextColor: #ffffff !default;
+
+$colors: (
+    "blue": #4DB6ED,
+    "green": #64BA8D,
+    "yellow": #FAD350,
+    "cyan": #66E2EA,
+    "pink": #EC75BC,
+    "indigo": #558DE1,
+    "teal": #4CAC9B,
+    "orange": #F0AB43,
+    "bluegray": #7F94A2,
+    "purple": #B071C6,
+    "red": #FF5735,
+    "primary": $primaryColor
+) !default;
+
+//main color scheme
+$primaryColor: #7B95A3 !default;
+$primaryDarkColor: #6c8999 !default;
+$primaryDarkerColor: #617c8a !default;
+$primaryTextColor: #ffffff !default;
+
+//highlight
+$highlightBg: #AFD3C8 !default;
+$highlightBgDark: #8DC8B5 !default;
+$highlightTextColor: #385048 !default;
+
+//global
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize: 1rem !default;
+$fontWeight: normal !default;
+$textColor: #666666 !default;
+$textSecondaryColor: #a6a6a6 !default;
+$borderRadius: 2px !default;
+$transitionDuration: .2s !default;
+$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$primeIconFontSize: 1rem !default;
+$divider: 1px solid #dadada !default;
+$inlineSpacing: .5rem !default; //spacing between inline elements
+$disabledOpacity: .5 !default; //opacity of a disabled item
+$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize: 2rem !default;
+$errorColor:#e7a3a3 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:lighten($primaryColor, 35%) !default;
+$focusOutline: 0 none !default;
+$focusOutlineOffset: 0 !default;
+$focusShadow: 0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $textSecondaryColor !default;
+$actionIconHoverBg: transparent !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $textColor !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding: 0.429rem 0.429rem !default;
+$inputTextFontSize: 1rem !default;
+$inputBg: #ffffff !default;
+$inputTextColor: $textColor !default;
+$inputIconColor: $textSecondaryColor !default;
+$inputBorder: 1px solid #dadada !default;
+$inputHoverBorderColor: #a6a6a6 !default;
+$inputFocusBorderColor: $primaryColor !default;
+$inputErrorBorderColor: $errorColor !default;
+$inputPlaceholderTextColor: #a6a6a6 !default;
+$inputFilledBg:#f4f4f4 !default;
+$inputFilledHoverBg:#f4f4f4 !default;
+$inputFilledFocusBg:#f4f4f4 !default;
+
+//input groups
+$inputGroupBg: #dbdbdb !default;
+$inputGroupTextColor: $textColor !default;
+$inputGroupAddOnMinWidth: 2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg: #ffffff !default;
+$inputListTextColor: $textColor !default;
+$inputListBorder: 1px solid #dadada !default;
+$inputListPadding: 0 !default;
+$inputListItemPadding: 0.429rem 0.857rem !default;
+$inputListItemBg: transparent !default;
+$inputListItemTextColor: $textColor !default;
+$inputListItemHoverBg: #f4f4f4 !default;
+$inputListItemTextHoverColor: $textColor !default;
+$inputListItemBorder: 0 none !default;
+$inputListItemBorderRadius: 0 !default;
+$inputListItemMargin: 0 !default;
+$inputListItemFocusShadow: inset 0 0 0 .15rem lighten($primaryColor, 35%) !default;
+$inputListHeaderPadding: 0.429rem 0.857rem !default;
+$inputListHeaderMargin: 0 !default;
+$inputListHeaderBg: #ffffff !default;
+$inputListHeaderTextColor: $textColor !default;
+$inputListHeaderBorder: 1px solid #dadada !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder: 1px solid #eaeaea !default;
+$inputOverlayShadow: 0 0 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//password
+$passwordMeterBg:#efefef !default;
+$passwordWeakBg:#F4B6B6 !default;
+$passwordMediumBg:#ffe38e !default;
+$passwordStrongBg:#A3E2C6 !default;
+
+//button
+$buttonPadding: .429rem 1rem !default;
+$buttonIconOnlyWidth: 2.357rem !default;
+$buttonIconOnlyPadding: .429rem 0 !default;
+$buttonBg: $primaryColor !default;
+$buttonTextColor: $primaryTextColor !default;
+$buttonBorder: 1px solid $primaryColor !default;
+$buttonHoverBg: $primaryDarkColor !default;
+$buttonTextHoverColor: $primaryTextColor !default;
+$buttonHoverBorderColor: $primaryDarkColor !default;
+$buttonActiveBg: $primaryDarkerColor !default;
+$buttonTextActiveColor: $primaryTextColor !default;
+$buttonActiveBorderColor: $primaryDarkerColor !default;
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius: 2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:#f4f4f4 !default;
+$plainButtonActiveBgColor:#dbdbdb !default;
+
+$secondaryButtonBg: #a3897b !default;
+$secondaryButtonTextColor: #ffffff !default;
+$secondaryButtonBorder: 1px solid #8e6f5f !default;
+$secondaryButtonHoverBg: #8e6f5f !default;
+$secondaryButtonTextHoverColor: #ffffff !default;
+$secondaryButtonHoverBorderColor: #7a5743 !default;
+$secondaryButtonActiveBg: #7a5743 !default;
+$secondaryButtonTextActiveColor: #ffffff !default;
+$secondaryButtonActiveBorderColor: #6e4e3c !default;
+$secondaryButtonFocusShadow: 0 0 0 0.2rem #bfaaa0 !default;
+
+$infoButtonBg: #A3DEF8 !default;
+$infoButtonTextColor: #3D4447 !default;
+$infoButtonBorder: 1px solid #79C8EB !default;
+$infoButtonHoverBg: #81CBEC !default;
+$infoButtonTextHoverColor: #3D4447 !default;
+$infoButtonHoverBorderColor: #60B7DE !default;
+$infoButtonActiveBg: #3ea9db !default;
+$infoButtonTextActiveColor: #3D4447 !default;
+$infoButtonActiveBorderColor: #2987B1 !default;
+$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 10%) !default;
+
+$successButtonBg: #A3E2C6 !default;
+$successButtonTextColor: #323E39 !default;
+$successButtonBorder: 1px solid #80CAAA !default;
+$successButtonHoverBg: #80CAAA !default;
+$successButtonTextHoverColor: #323E39 !default;
+$successButtonHoverBorderColor: #5EA285 !default;
+$successButtonActiveBg: #31B57C !default;
+$successButtonTextActiveColor: #323E39 !default;
+$successButtonActiveBorderColor: #5EA285 !default;
+$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 10%) !default;
+
+$warningButtonBg: #ffe38e !default;
+$warningButtonTextColor: #333333 !default;
+$warningButtonBorder: 1px solid #ffd95e !default;
+$warningButtonHoverBg: #ffd95e !default;
+$warningButtonTextHoverColor: #333333 !default;
+$warningButtonHoverBorderColor: #ffce3c !default;
+$warningButtonActiveBg: #ffce3c !default;
+$warningButtonTextActiveColor: #333333 !default;
+$warningButtonActiveBorderColor: #ffc62a !default;
+$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 5%) !default;
+
+$helpButtonBg:#e9bef1 !default;
+$helpButtonTextColor:#333333 !default;
+$helpButtonBorder:1px solid #de9eea !default;
+$helpButtonHoverBg:#de9eea !default;
+$helpButtonTextHoverColor:#333333 !default;
+$helpButtonHoverBorderColor:#d37de3 !default;
+$helpButtonActiveBg:#d37de3 !default;
+$helpButtonTextActiveColor:#333333 !default;
+$helpButtonActiveBorderColor:#c85ddc !default;
+$helpButtonFocusShadow:0 0 0 0.2rem lighten($helpButtonBg, 5%) !default;
+
+$dangerButtonBg: #F4B6B6 !default;
+$dangerButtonTextColor: #262222 !default;
+$dangerButtonBorder: 1px solid #E38787 !default;
+$dangerButtonHoverBg: #EF9999 !default;
+$dangerButtonTextHoverColor: #262222 !default;
+$dangerButtonHoverBorderColor: #CB5858 !default;
+$dangerButtonActiveBg: #EB5656 !default;
+$dangerButtonTextActiveColor: #262222 !default;
+$dangerButtonActiveBorderColor: #B73737 !default;
+$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 10%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder: $inputBorder !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor: $primaryColor !default;
+$checkboxActiveBg: $primaryColor !default;
+$checkboxIconActiveColor: $primaryTextColor !default;
+$checkboxActiveHoverBg: $primaryDarkerColor !default;
+$checkboxIconActiveHoverColor: $primaryTextColor !default;
+$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder: $inputBorder !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor: $primaryColor !default;
+$radiobuttonActiveBg: $primaryColor !default;
+$radiobuttonIconActiveColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth: 2rem !default;
+$colorPickerPreviewHeight: 2rem !default;
+$colorPickerBg: #323232 !default;
+$colorPickerBorder:1px solid  #191919 !default;
+$colorPickerHandleColor: #ffffff !default;
+
+//togglebutton
+$toggleButtonBg: #eaeaea !default;
+$toggleButtonBorder: 1px solid #eaeaea !default;
+$toggleButtonTextColor: #333333 !default;
+$toggleButtonIconColor: #666666 !default;
+$toggleButtonHoverBg: #c8c8c8 !default;
+$toggleButtonHoverBorderColor: #c8c8c8 !default;
+$toggleButtonTextHoverColor: #333333 !default;
+$toggleButtonIconHoverColor: #666666 !default;
+$toggleButtonActiveBg: $highlightBg !default;
+$toggleButtonActiveBorderColor: $highlightBg !default;
+$toggleButtonTextActiveColor: $highlightTextColor !default;
+$toggleButtonIconActiveColor: $highlightTextColor !default;
+$toggleButtonActiveHoverBg: $highlightBgDark !default;
+$toggleButtonActiveHoverBorderColor: $highlightBgDark !default;
+$toggleButtonTextActiveHoverColor: $highlightTextColor !default;
+$toggleButtonIconActiveHoverColor: $highlightTextColor !default;
+
+//inplace
+$inplacePadding: $inputPadding !default;
+$inplaceHoverBg: #f4f4f4 !default;
+$inplaceTextHoverColor: $textColor !default;
+
+//rating
+$ratingIconFontSize: 1.143rem !default;
+$ratingCancelIconColor: #f3b9b9 !default;
+$ratingCancelIconHoverColor: #d66161 !default;
+$ratingStarIconOffColor: $textColor !default;
+$ratingStarIconOnColor: $primaryColor !default;
+$ratingStarIconHoverColor: $primaryColor !default;
+
+//slider
+$sliderBg: #c4c4c4 !default;
+$sliderBorder: 0 none !default;
+$sliderHorizontalHeight: .286rem !default;
+$sliderVerticalWidth: 0.286rem !default;
+$sliderHandleWidth: 1.429rem !default;
+$sliderHandleHeight: 1.429rem !default;
+$sliderHandleBg: #ffffff !default;
+$sliderHandleBorder: 2px solid #7f7f7f !default;
+$sliderHandleBorderRadius: 50% !default;
+$sliderHandleHoverBorderColor: $primaryColor !default;
+$sliderHandleHoverBg: 2px solid #7f7f7f !default;
+$sliderRangeBg: $primaryColor !default;
+
+//calendar
+$calendarTableMargin: 0.857rem 0 !default;
+$calendarPadding: 0.857rem !default;
+$calendarBg: $inputListBg !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor: $inputListTextColor !default;
+$calendarBorder: $inputListBorder !default;
+$calendarOverlayBorder: $inputOverlayBorder !default;
+
+$calendarHeaderPadding: .5rem !default;
+$calendarHeaderBg: $inputListHeaderBg !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder: 0 none !default;
+$calendarHeaderTextColor: $inputListHeaderTextColor !default;
+$calendarHeaderFontWeight: 700 !default;
+$calendarHeaderCellPadding: .5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding: .5rem !default;
+$calendarCellDateWidth: 2.5rem !default;
+$calendarCellDateHeight: 2.5rem !default;
+$calendarCellDateBorderRadius: $borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg: #f4f4f4 !default;
+$calendarCellDateTodayBg: #d0d0d0 !default;
+$calendarCellDateTodayBorderColor: transparent !default;
+$calendarCellDateTodayTextColor: $textColor !default;
+
+$calendarButtonBarPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerElementPadding: 0 .429rem !default;
+$calendarTimePickerTimeFontSize: 1.286rem !default;
+
+$calendarBreakpoint: 769px !default;
+$calendarCellDatePaddingSM: .25rem !default;
+
+//input switch
+$inputSwitchWidth: 3rem !default;
+$inputSwitchHeight: 1.75rem !default;
+$inputSwitchBorderRadius: 30px !default;
+$inputSwitchHandleWidth: 1.250rem !default;
+$inputSwitchHandleHeight: 1.250rem !default;
+$inputSwitchHandleBorderRadius: 50% !default;
+$inputSwitchSliderPadding: .25rem !default;
+$inputSwitchSliderOffBg: $inputBg !default;
+$inputSwitchHandleOffBg: $primaryColor !default;
+$inputSwitchSliderOffHoverBg: #d8dae2 !default;
+$inputSwitchSliderOnBg: $highlightBg !default;
+$inputSwitchSliderOnHoverBg: $highlightBg !default;
+$inputSwitchHandleOnBg: $highlightTextColor !default;
+
+//panel
+$panelHeaderBorderColor:$primaryColor !default;
+$panelHeaderBorder: 1px solid $primaryColor !default;
+$panelHeaderBg: $primaryColor !default;
+$panelHeaderTextColor: $primaryTextColor !default;
+$panelHeaderFontWeight: 700 !default;
+$panelHeaderPadding: 0.857rem 1rem !default;
+$panelToggleableHeaderPadding: 0.857rem 1rem !default;
+
+$panelHeaderHoverBg: $primaryDarkerColor !default;
+$panelHeaderHoverBorderColor: $primaryDarkerColor !default;
+$panelHeaderTextHoverColor: $primaryTextColor !default;
+
+$panelContentBorderColor: #dadada !default;
+$panelContentBorder: 1px solid #dadada !default;
+$panelContentBg: #ffffff !default;
+$panelContentEvenRowBg:#f8f8f8 !default;
+$panelContentTextColor: $textColor !default;
+$panelContentPadding: 0.571rem 1rem !default;
+
+$panelFooterBorder: 1px solid #dadada !default;
+$panelFooterBg: #ffffff !default;
+$panelFooterTextColor: $textColor !default;
+$panelFooterPadding: 0.571rem 1rem !default;
+
+//accordion
+$accordionSpacing: 2px !default;
+$accordionHeaderBorder: $panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor: $panelHeaderTextColor !default;
+$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
+$accordionHeaderPadding: $panelHeaderPadding !default;
+
+$accordionHeaderHoverBg: $primaryDarkerColor !default;
+$accordionHeaderHoverBorderColor: $primaryDarkerColor !default;
+$accordionHeaderTextHoverColor: $primaryTextColor !default;
+
+$accordionHeaderActiveBg: $highlightBg !default;
+$accordionHeaderActiveBorderColor: #dadada !default;
+$accordionHeaderTextActiveColor: $highlightTextColor !default;
+
+$accordionHeaderActiveHoverBg: $highlightBgDark !default;
+$accordionHeaderActiveHoverBorderColor: $highlightBgDark !default;
+$accordionHeaderTextActiveHoverColor: $highlightTextColor !default;
+
+$accordionContentBorder: $panelContentBorder !default;
+$accordionContentBg: $panelContentBg !default;
+$accordionContentTextColor: $panelContentTextColor !default;
+$accordionContentPadding: $panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder: 0 none !default;
+$tabviewNavBorderWidth: 1px !default;
+$tabviewNavBg: transparent !default;
+
+$tabviewHeaderSpacing: 2px !default;
+$tabviewHeaderBorder: $panelHeaderBorder !default;
+$tabviewHeaderBorderWidth: 1px !default;
+$tabviewHeaderBorderColor: $primaryColor !default;
+$tabviewHeaderBg:$panelHeaderBg !default;
+$tabviewHeaderTextColor: $panelHeaderTextColor !default;
+$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
+$tabviewHeaderPadding: $panelHeaderPadding !default;
+$tabviewHeaderMargin: 0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg: $primaryDarkerColor !default;
+$tabviewHeaderHoverBorderColor: $primaryDarkerColor !default;
+$tabviewHeaderTextHoverColor: $primaryTextColor !default;
+
+$tabviewHeaderActiveBg: $highlightBg !default;
+$tabviewHeaderActiveBorderColor: #dadada !default;
+$tabviewHeaderTextActiveColor: $highlightTextColor !default;
+
+$tabviewContentBorder: $panelContentBorder !default;
+$tabviewContentBg: $panelContentBg !default;
+$tabviewContentTextColor: $panelContentTextColor !default;
+$tabviewContentPadding: $panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight: .25rem !default;
+$fileUploadContentPadding: $panelContentPadding !default;
+
+//scrollpanel
+$scrollPanelTrackBorder: 0 none !default;
+$scrollPanelTrackBg: #f8f8f8 !default;
+
+//card
+$cardBodyPadding: 1rem !default;
+$cardTitleFontSize: 1.5rem !default;
+$cardTitleFontWeight: 700 !default;
+$cardSubTitleFontWeight: 700 !default;
+$cardSubTitleColor: $textSecondaryColor !default;
+$cardContentPadding: 1rem 0 !default;
+$cardFooterPadding: 1rem 0 0 0 !default;
+$cardShadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg: #ffffff !default;
+$paginatorTextColor: $textColor !default;
+$paginatorBorder: solid #dadada !default;
+$paginatorBorderWidth: 1px !default;
+$paginatorPadding: 0 !default;
+$paginatorElementWidth: $buttonIconOnlyWidth !default;
+$paginatorElementHeight: $buttonIconOnlyWidth !default;
+$paginatorElementBg: transparent !default;
+$paginatorElementBorder: 0 none !default;
+$paginatorElementIconColor: $textColor !default;
+$paginatorElementHoverBg: #f4f4f4 !default;
+$paginatorElementHoverBorderColor: transparent !default;
+$paginatorElementIconHoverColor: $textColor !default;
+$paginatorElementBorderRadius: 0 !default;
+$paginatorElementMargin: 0 !default;
+$paginatorElementPadding: 0 !default;
+
+//table
+$tableHeaderBorder: $panelHeaderBorder !default;
+$tableHeaderBorderWidth: 1px 1px 0 1px !default;
+$tableHeaderBg: $panelHeaderBg !default;
+$tableHeaderTextColor: $panelHeaderTextColor !default;
+$tableHeaderFontWeight: $panelHeaderFontWeight !default;
+$tableHeaderPadding: $panelHeaderPadding !default;
+
+$tableHeaderCellPadding: 0.571rem 0.857rem !default;
+$tableHeaderCellBg: #ffffff !default;
+$tableHeaderCellTextColor: $textColor !default;
+$tableHeaderCellFontWeight: 700 !default;
+$tableHeaderCellBorder: 1px solid #dadada !default;
+$tableHeaderCellBorderWidth: 1px 1px 1px 1px !default;
+$tableHeaderCellHoverBg: #eaeaea !default;
+$tableHeaderCellTextHoverColor: $textColor !default;
+$tableHeaderCellIconColor: $textColor !default;
+$tableHeaderCellIconHoverColor: $textColor !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize: 1.143rem !default;
+
+$tableBodyRowBg: #ffffff !default;
+$tableBodyRowTextColor: $textColor !default;
+$tableBodyRowEvenBg: #f8f8f8 !default;
+$tableBodyRowHoverBg: #eaeaea !default;
+$tableBodyRowTextHoverColor: $textColor !default;
+$tableBodyCellBorder: 1px solid #dadada !default;
+$tableBodyCellBorderWidth: 1px !default;
+$tableBodyCellPadding: 0.571rem 0.857rem !default;
+
+$tableFooterCellPadding: 0.571rem 0.857rem !default;
+$tableFooterCellBg: #ffffff !default;
+$tableFooterCellTextColor: $textColor !default;
+$tableFooterCellFontWeight: 700 !default;
+$tableFooterCellBorder: 1px solid #dadada !default;
+$tableFooterCellBorderWidth: 1px !default;
+$tableResizerHelperBg: $primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder: $panelFooterBorder !default;
+$tableFooterBorderWidth: 0 1px 1px 1px !default;
+$tableFooterBg: $panelFooterBg !default;
+$tableFooterTextColor: $panelFooterTextColor !default;
+$tableFooterFontWeight: normal !default;
+$tableFooterPadding: $panelFooterPadding !default;
+
+$tableCellContentAlignment: left !default;
+$tableTopPaginatorBorderWidth: 1px 1px 0 1px !default;
+$tableBottomPaginatorBorderWidth: 0 1px 1px 1px !default;
+
+$tableScaleSM: 0.85 !default;
+$tableScaleLG: 1.25 !default;
+
+//dataview
+$dataViewContentPadding: 0 !default;
+$dataViewContentBorder: 0 none !default;
+$dataViewListItemBorder: $divider !default;
+$dataViewListItemBorderWidth: 0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding: 0 !default;
+$dataScrollerContentBorder: 0 none !default;
+$dataScrollerListItemBorder: $divider !default;
+$dataScrollerListItemBorderWidth: 0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg: $highlightBg !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder: 1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor: $highlightTextColor !default;
+
+//tree
+$treeContainerPadding: 0.286rem !default;
+$treeNodePadding: 0.143rem !default;
+$treeNodeContentPadding: 0 !default;
+$treeNodeChildrenPadding: 0 0 0 1rem !default;
+$treeNodeIconColor: $textSecondaryColor !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$highlightBg !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:#c8c8c8 !default;
+
+//org chart
+$organizationChartConnectorColor: #c8c8c8 !default;
+
+//messages
+$messageMargin: 1rem 0 !default;
+$messagePadding: 1rem !default;
+$messageBorderWidth: 1px !default;
+$messageIconFontSize: 1.5rem !default;
+$messageTextFontSize: 1rem !default;
+$messageTextFontWeight: normal !default;
+
+//message
+$inlineMessagePadding: .5rem !default;
+$inlineMessageMargin: 0 !default;
+$inlineMessageIconFontSize: 1rem !default;
+$inlineMessageTextFontSize: 1rem !default;
+$inlineMessageBorderWidth: 1px !default;
+
+//toast
+$toastIconFontSize: 2rem !default;
+$toastMessageTextMargin: 0 0 0 $inlineSpacing !default;
+$toastMargin: 0 0 1rem 0 !default;
+$toastPadding: 1rem !default;
+$toastBorderWidth: 0 !default;
+$toastShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$toastOpacity: .9 !default;
+$toastTitleFontWeight: 700 !default;
+$toastDetailMargin: $inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg: #A3DEF8 !default;
+$infoMessageBorder: 1px solid #79C8EB !default;
+$infoMessageTextColor: #212121 !default;
+$infoMessageIconColor: #212121 !default;
+$successMessageBg: #A3E2C6 !default;
+$successMessageBorder: 1px solid #A3E2C6 !default;
+$successMessageTextColor: #212121 !default;
+$successMessageIconColor: #212121 !default;
+$warningMessageBg: #ffe277 !default;
+$warningMessageBorder: 1px solid #ffe277 !default;
+$warningMessageTextColor: #212121 !default;
+$warningMessageIconColor: #212121 !default;
+$errorMessageBg: #ff8b8b !default;
+$errorMessageBorder: 1px solid #ff8b8b !default;
+$errorMessageTextColor: #212121 !default;
+$errorMessageIconColor: #212121 !default;
+
+//overlays
+$overlayContentBorder: 1px solid #f1f1f1 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow: 0 0 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//dialog
+$dialogHeaderBg: $panelHeaderBg !default;
+$dialogHeaderBorder: $panelHeaderBorder !default;
+$dialogHeaderTextColor: $panelHeaderTextColor !default;
+$dialogHeaderFontWeight: $panelHeaderFontWeight !default;
+$dialogHeaderFontSize: 1rem !default;
+$dialogHeaderPadding: 1rem !default;
+$dialogContentPadding: 1rem !default;
+$dialogFooterBorder: $panelFooterBorder !default;
+$dialogFooterPadding: $panelFooterPadding !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem .571rem 1rem !default;
+
+//tooltip
+$tooltipBg: $highlightBg !default;
+$tooltipTextColor: $highlightTextColor !default;
+$tooltipPadding: $inputPadding !default;
+
+//steps
+$stepsItemBg: #ffffff !default;
+$stepsItemBorder: 1px solid #c8c8c8 !default;
+$stepsItemTextColor: $textSecondaryColor !default;
+$stepsItemNumberWidth: 2rem !default;
+$stepsItemNumberHeight: 2rem !default;
+$stepsItemNumberFontSize: 1.143rem !default;
+$stepsItemNumberColor: $textSecondaryColor !default;
+$stepsItemNumberBorderRadius: 50% !default;
+$stepsItemActiveFontWeight: 700 !default;
+
+//progressbar
+$progressBarHeight: 24px !default;
+$progressBarBorder: 0 none !default;
+$progressBarBg: #efefef !default;
+$progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth: 12.5rem !default;
+$menuBg: #ffffff !default;
+$menuBorder: 1px solid #c8c8c8 !default;
+$menuTextColor: $textColor !default;
+$menuitemPadding: 0.857rem !default;
+$menuitemBorderRadius: 0 !default;
+$menuitemTextColor: $textColor !default;
+$menuitemIconColor: $textColor !default;
+$menuitemTextHoverColor: $textColor !default;
+$menuitemIconHoverColor: $textColor !default;
+$menuitemHoverBg: #eaeaea !default;
+$menuitemTextActiveColor: $textColor !default;
+$menuitemIconActiveColor: $textColor !default;
+$menuitemActiveBg: #eaeaea !default;
+$menuitemSubmenuIconFontSize: .875rem !default;
+$submenuHeaderMargin: 0 !default;
+$submenuHeaderPadding: 0.857rem !default;
+$submenuHeaderBg: #f4f4f4 !default;
+$submenuHeaderTextColor: $textColor !default;
+$submenuHeaderFontWeight: 700 !default;
+$submenuHeaderBorderRadius: $borderRadius !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder: 1px solid #eaeaea !default;
+$overlayMenuShadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$verticalMenuPadding: 0 !default;
+$menuSeparatorMargin: 0 !default;
+
+$breadcrumbPadding: 0.571rem 1rem !default;
+$breadcrumbBg: $menuBg !default;
+$breadcrumbBorder: $menuBorder !default;
+$breadcrumbItemTextColor: $menuitemTextColor !default;
+$breadcrumbItemIconColor: $menuitemIconColor !default;
+$breadcrumbLastItemTextColor: $menuitemTextColor !default;
+$breadcrumbLastItemIconColor: $menuitemIconColor !default;
+$breadcrumbSeparatorColor: $menuitemTextColor !default;
+
+$horizontalMenuPadding: .5rem !default;
+$horizontalMenuBg: $menuBg !default;
+$horizontalMenuBorder: $menuBorder !default;
+$horizontalMenuTextColor: $menuTextColor !default;
+$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg: $primaryColor !default;
+$badgeTextColor: $primaryTextColor !default;
+$badgeMinWidth: 1.5rem !default;
+$badgeHeight: 1.5rem !default;
+$badgeFontWeight: 700 !default;
+$badgeFontSize: .75rem !default;
+
+$tagPadding: .25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding: 1rem !default;
+$carouselIndicatorBg: $primaryColor !default;
+$carouselIndicatorHoverBg: $primaryDarkerColor !default;
+$carouselIndicatorBorderRadius: 0 !default;
+$carouselIndicatorWidth: 2rem !default;
+$carouselIndicatorHeight: .5rem !default;
+
+//galleria
+$galleriaMaskBg: rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin: .5rem !default;
+$galleriaCloseIconFontSize: 2rem !default;
+$galleriaCloseIconBg: transparent !default;
+$galleriaCloseIconColor: #ebedef !default;
+$galleriaCloseIconHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor: #ebedef !default;
+$galleriaCloseIconWidth: 4rem !default;
+$galleriaCloseIconHeight: 4rem !default;
+$galleriaCloseIconBorderRadius: 50% !default;
+
+$galleriaItemNavigatorBg: rgba(0,0,0,.2) !default;
+$galleriaItemNavigatorColor: #aeb6bf !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize: 2rem !default;
+$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3) !default;
+$galleriaItemNavigatorHoverColor: #ebedef !default;
+$galleriaItemNavigatorWidth: 4rem !default;
+$galleriaItemNavigatorHeight: 4rem !default;
+$galleriaItemNavigatorBorderRadius: $borderRadius !default;
+
+$galleriaCaptionBg: rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor: #ebedef !default;
+$galleriaCaptionPadding: 1rem !default;
+
+$galleriaIndicatorsPadding: 1rem !default;
+$galleriaIndicatorBg: $primaryColor !default;
+$galleriaIndicatorHoverBg: $primaryDarkerColor !default;
+$galleriaIndicatorBorderRadius: 50% !default;
+$galleriaIndicatorWidth: 1rem !default;
+$galleriaIndicatorHeight: 1rem !default;
+$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem: rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg: rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding: 1rem .25rem !default;
+$galleriaThumbnailNavigatorBg: transparent !default;
+$galleriaThumbnailNavigatorColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorBorderRadius: 50% !default;
+$galleriaThumbnailNavigatorWidth: 2rem !default;
+$galleriaThumbnailNavigatorHeight: 2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:#dadada !default;
+
+//avatar
+$avatarBg:#dadada !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:#dadada !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:#f4f4f4 !default;
+
+//skeleton
+$skeletonBg:#dadada !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:#eaeaea !default;
+$splitterGutterHandleBg:#dadada !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: #324249 !default;
+$speedDialActionHoverBg: #222c31 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a: #ffffff;
+    --surface-b: #f4f4f4;
+    --surface-c: #eaeaea;
+    --surface-d: #dadada;
+    --surface-e: #ffffff;
+    --surface-f: #ffffff;
+    --text-color: #495057;
+    --text-color-secondary: #6c757d;
+    --primary-color: #{$primaryColor};
+    --primary-color-text: #{$primaryTextColor};
+    --font-family: #{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #eef1f2;
+    --surface-100: #dde2e4;
+    --surface-200: #bbc5ca;
+    --surface-300: #98a8af;
+    --surface-400: #768b95;
+    --surface-500: #546e7a;
+    --surface-600: #435862;
+    --surface-700: #324249;
+    --surface-800: #222c31;
+    --surface-900: #111618;
+    --gray-50: #eef1f2;
+    --gray-100: #dde2e4;
+    --gray-200: #bbc5ca;
+    --gray-300: #98a8af;
+    --gray-400: #768b95;
+    --gray-500: #546e7a;
+    --gray-600: #435862;
+    --gray-700: #324249;
+    --gray-800: #222c31;
+    --gray-900: #111618;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#f4f4f4;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dadada;
+    --surface-hover: #eaeaea;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/rhea/_vendor_extensions.scss b/themes/rhea/_vendor_extensions.scss
new file mode 100644
index 0000000..eae66de
--- /dev/null
+++ b/themes/rhea/_vendor_extensions.scss
@@ -0,0 +1,23 @@
+.p-panel {
+    .p-panel-header {
+        .p-panel-header-icon {
+            color: $primaryTextColor;
+
+            &:enabled:hover {
+                color: $primaryTextColor;
+            }
+        }
+    }
+}
+
+.p-dialog {
+    .p-dialog-header {
+        .p-dialog-header-icon {
+            color: $primaryTextColor;
+
+            &:enabled:hover {
+                color: $primaryTextColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/rhea/theme.scss b/themes/rhea/theme.scss
new file mode 100644
index 0000000..cf3089b
--- /dev/null
+++ b/themes/rhea/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../designer/_components';
+@import './_extensions';
diff --git a/themes/saga/_extensions.scss b/themes/saga/_extensions.scss
new file mode 100644
index 0000000..de8b398
--- /dev/null
+++ b/themes/saga/_extensions.scss
@@ -0,0 +1,25 @@
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/saga/_variables.scss b/themes/saga/_variables.scss
new file mode 100644
index 0000000..3b58085
--- /dev/null
+++ b/themes/saga/_variables.scss
@@ -0,0 +1,881 @@
+$colors: (
+    "blue": #2196F3,
+    "green": #4caf50,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #3F51B5,
+    "teal": #009688,
+    "orange": #F57C00,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #FF4032,
+    "primary": $primaryColor
+) !default;
+
+//reused color variables
+$shade000:#ffffff !default;    //surface
+$shade100:#f8f9fa !default;    //header background
+$shade200:#e9ecef !default;    //hover background
+$shade300:#dee2e6 !default;    //border, divider
+$shade400:#ced4da !default;    //input border
+$shade500:#adb5bd !default;    //input icon
+$shade600:#6c757d !default;    //text secondary color
+$shade700:#495057 !default;    //text color
+$shade800:#343a40 !default;    //unused
+$shade900:#212529 !default;    //unused
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:3px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#f44336 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:$shade200 !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .5rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade100 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$shade000 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade700 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade300 !default;
+$passwordWeakBg:#D32F2F !default;
+$passwordMediumBg:#FBC02D !default;
+$passwordStrongBg:#689F38 !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#607D8B !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#0288D1 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#689F38 !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#FBC02D !default;
+$warningButtonTextColor:#212529 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#9C27B0 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#D32F2F !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade600 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade700 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#e74c3c !default;
+$ratingCancelIconHoverColor:#c0392b !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade700 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade000 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade700 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade700 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade700 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade700 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg: $shade200 !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade700 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade700 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade700 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$shade600 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade200 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade700 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade200 !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade700 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade700 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade200 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade700 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade100 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:1px solid $shade200 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade700 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade200 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade200 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade700 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade200 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid $shade200 !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0 !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade000 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#B3E5FC !default;
+$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
+$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$successMessageBg:#C8E6C9 !default;
+$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
+$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$warningMessageBg:#FFECB3 !default;
+$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
+$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$errorMessageBg:#FFCDD2 !default;
+$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
+$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade700 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$shade700 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:1px solid $shade200 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade700 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$shade700 !default;
+$menuitemIconActiveColor:$shade600 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade700 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade200 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade800 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade700};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #FAFAFA;
+    --surface-100: #F5F5F5;
+    --surface-200: #EEEEEE;
+    --surface-300: #E0E0E0;
+    --surface-400: #BDBDBD;
+    --surface-500: #9E9E9E;
+    --surface-600: #757575;
+    --surface-700: #616161;
+    --surface-800: #424242;
+    --surface-900: #212121;
+    --gray-50: #FAFAFA;
+    --gray-100: #F5F5F5;
+    --gray-200: #EEEEEE;
+    --gray-300: #E0E0E0;
+    --gray-400: #BDBDBD;
+    --gray-500: #9E9E9E;
+    --gray-600: #757575;
+    --gray-700: #616161;
+    --gray-800: #424242;
+    --gray-900: #212121;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#f8f9fa;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dee2e6;
+    --surface-hover: #e9ecef;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/saga/saga-blue/_extensions.scss b/themes/saga/saga-blue/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/saga/saga-blue/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/saga/saga-blue/_fonts.scss b/themes/saga/saga-blue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/saga/saga-blue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/saga/saga-blue/_variables.scss b/themes/saga/saga-blue/_variables.scss
new file mode 100644
index 0000000..15979dd
--- /dev/null
+++ b/themes/saga/saga-blue/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #2196F3 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #E3F2FD !default;
+$highlightTextColor: #495057 !default;
+
+@import '../_variables';
diff --git a/themes/saga/saga-blue/theme.scss b/themes/saga/saga-blue/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/saga/saga-blue/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/saga/saga-green/_extensions.scss b/themes/saga/saga-green/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/saga/saga-green/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/saga/saga-green/_fonts.scss b/themes/saga/saga-green/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/saga/saga-green/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/saga/saga-green/_variables.scss b/themes/saga/saga-green/_variables.scss
new file mode 100644
index 0000000..9bf3252
--- /dev/null
+++ b/themes/saga/saga-green/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #4CAF50 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #E8F5E9 !default;
+$highlightTextColor: #495057 !default;
+
+@import '../_variables';
diff --git a/themes/saga/saga-green/theme.scss b/themes/saga/saga-green/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/saga/saga-green/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/saga/saga-orange/_extensions.scss b/themes/saga/saga-orange/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/saga/saga-orange/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/saga/saga-orange/_fonts.scss b/themes/saga/saga-orange/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/saga/saga-orange/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/saga/saga-orange/_variables.scss b/themes/saga/saga-orange/_variables.scss
new file mode 100644
index 0000000..53055cc
--- /dev/null
+++ b/themes/saga/saga-orange/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #FFC107 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: #FFF3E0 !default;
+$highlightTextColor: #495057 !default;
+
+@import '../_variables';
\ No newline at end of file
diff --git a/themes/saga/saga-orange/theme.scss b/themes/saga/saga-orange/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/saga/saga-orange/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/saga/saga-purple/_extensions.scss b/themes/saga/saga-purple/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/saga/saga-purple/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/saga/saga-purple/_fonts.scss b/themes/saga/saga-purple/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/saga/saga-purple/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/saga/saga-purple/_variables.scss b/themes/saga/saga-purple/_variables.scss
new file mode 100644
index 0000000..2b8f57e
--- /dev/null
+++ b/themes/saga/saga-purple/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #9C27B0 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #F3E5F5 !default;
+$highlightTextColor: #495057 !default;
+
+@import '../_variables';
diff --git a/themes/saga/saga-purple/theme.scss b/themes/saga/saga-purple/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/saga/saga-purple/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/soho/soho-dark/_extensions.scss b/themes/soho/soho-dark/_extensions.scss
new file mode 100644
index 0000000..7ad12f7
--- /dev/null
+++ b/themes/soho/soho-dark/_extensions.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            .p-galleria-indicator {
+                &.p-highlight {
+                    button {
+                        background: $primaryColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/soho/soho-dark/_fonts.scss b/themes/soho/soho-dark/_fonts.scss
new file mode 100644
index 0000000..416b812
--- /dev/null
+++ b/themes/soho/soho-dark/_fonts.scss
@@ -0,0 +1,27 @@
+/* lato-300 - latin-ext_latin */
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Lato Light'), local('Lato-Light'),
+         url('./fonts/lato-v17-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/lato-v17-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* lato-regular - latin-ext_latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Lato Regular'), local('Lato-Regular'),
+         url('./fonts/lato-v17-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/lato-v17-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* lato-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Lato Bold'), local('Lato-Bold'),
+         url('./fonts/lato-v17-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/lato-v17-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/soho/soho-dark/_variables.scss b/themes/soho/soho-dark/_variables.scss
new file mode 100644
index 0000000..05fd423
--- /dev/null
+++ b/themes/soho/soho-dark/_variables.scss
@@ -0,0 +1,882 @@
+$primaryColor: #b19df7 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: hsl(234, 15%, 13%) !default;
+
+$highlightBg:rgba(177, 157, 247, .16) !default;
+$highlightTextColor:$primaryColor !default;
+
+$colors: (
+    "blue": #54B0F3,
+    "green": #29C76F,
+    "yellow": #F3D054,
+    "cyan": #3EC9D6,
+    "pink": #EA5455,
+    "indigo": #5464F3,
+    "teal": #0DC381,
+    "orange": #FF9F42,
+    "bluegray": #6878A0,
+    "purple": #7254F3,
+    "red": #FF384B,
+    "primary": $primaryColor
+) !default;
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade600:#3e4053 !default;  //input bg, border, divider
+$shade700:#333544 !default;  //unused
+$shade800:#282936 !default;  //elevated surface
+$shade900:#1d1e27 !default;  //ground surface
+
+$hoverBg:rgba(255,255,255,.03) !default;
+
+//global
+$fontFamily:Lato, Helvetica, sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:6px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default; //spacing between inline elements
+$disabledOpacity:.4 !default; //opacity of a disabled item
+$maskBg:rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize:2rem !default;
+$errorColor:#ff9a9a !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: $hoverBg !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.75rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:1px solid $shade600 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$inputFilledBg !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:3rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.75rem 0 !default;
+$inputListItemPadding:.75rem 1.25rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.25rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:1px solid $shade600 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#eb9a9c !default;
+$passwordMediumBg:#ffcf91 !default;
+$passwordStrongBg:#93deac !default;
+
+//button
+$buttonPadding:.75rem 1.25rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:.75rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#d4ea93 !default;
+$secondaryButtonTextColor:#1d1e27 !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 1px scale-color($secondaryButtonBg, $lightness: 30%) !default;
+
+$infoButtonBg:#9bcaff !default;
+$infoButtonTextColor:#1d1e27 !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 1px scale-color($infoButtonBg, $lightness: 30%) !default;
+
+$successButtonBg:#93deac !default;
+$successButtonTextColor:#1d1e27 !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 1px scale-color($successButtonBg, $lightness: 30%) !default;
+
+$warningButtonBg:#ffcf91 !default;
+$warningButtonTextColor:#1d1e27 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 1px scale-color($warningButtonBg, $lightness: 30%) !default;
+
+$helpButtonBg:#86e0e7 !default;
+$helpButtonTextColor:#1d1e27 !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
+
+$dangerButtonBg:#eb9a9c !default;
+$dangerButtonTextColor:#1d1e27 !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 1px scale-color($dangerButtonBg, $lightness: 30%) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:22px !default;
+$checkboxHeight:22px !default;
+$checkboxBorder:2px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:22px !default;
+$radiobuttonHeight:22px !default;
+$radiobuttonBorder:2px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$shade800 !default;
+$toggleButtonBorder:1px solid $shade600 !default;
+$toggleButtonTextColor:$shade000 !default;
+$toggleButtonIconColor:$shade100 !default;
+$toggleButtonHoverBg:$hoverBg !default;
+$toggleButtonHoverBorderColor:$shade600 !default;
+$toggleButtonTextHoverColor:$shade000 !default;
+$toggleButtonIconHoverColor:$shade100 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#F48FB1 !default;
+$ratingCancelIconHoverColor:#F48FB1 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade600 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:700 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade600 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$hoverBg !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade600 !default;
+$panelHeaderBorder:1px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:700 !default;
+$panelHeaderPadding:1.25rem !default;
+$panelToggleableHeaderPadding:.75rem 1.25rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:1px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,0.01) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:0.75rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:4px !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade600 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade600 transparent !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$primaryColor !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$shade800 !default;
+$tabviewContentTextColor:$shade000 !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1.25rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1.25rem 0 !default;
+$cardFooterPadding:1.25rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$shade100 !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:1px !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade100 !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade000 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade600 !default;
+$tableHeaderBorderWidth:0 0 1px 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:700 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:700 !default;
+$tableHeaderCellBorder:1px solid $shade600 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:#2b2c38 !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:1px solid $shade600 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:700 !default;
+$tableFooterCellBorder:1px solid $shade600 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade600 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:700 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:1px 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade600 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$primaryTextColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade600 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1.25rem 1.75rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:400 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:1px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:none !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#e9e9ff !default;
+$infoMessageBorder:solid #696cff !default;
+$infoMessageTextColor:#696cff !default;
+$infoMessageIconColor:#696cff !default;
+$successMessageBg:#e4f8f0 !default;
+$successMessageBorder:solid #1ea97c !default;
+$successMessageTextColor:#1ea97c !default;
+$successMessageIconColor:#1ea97c !default;
+$warningMessageBg:#fff2e2 !default;
+$warningMessageBorder:solid #cc8925 !default;
+$warningMessageTextColor:#cc8925 !default;
+$warningMessageIconColor:#cc8925 !default;
+$errorMessageBg:#ffe7e6 !default;
+$errorMessageBorder:solid #ff5757 !default;
+$errorMessageTextColor:#ff5757 !default;
+$errorMessageIconColor:#ff5757 !default;
+
+//overlays
+$overlayContentBorder:1px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:700 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:0 none !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:700 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade700 !default;
+$menuBorder:1px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1.25rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextActiveColor:$highlightTextColor !default;
+$menuitemIconActiveColor:$highlightTextColor !default;
+$menuitemActiveBg:$highlightBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1.25rem !default;
+$submenuHeaderBg:$shade700 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid $shade600 !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade700 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:$hoverBg !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:#f8f9fa !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:#f8f9fa !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:#f8f9fa !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:#f8f9fa !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:#f8f9fa !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade600 !default;
+$galleriaIndicatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1.25rem 0 !default;
+$dividerHorizontalPadding:0 1.25rem !default;
+$dividerVerticalMargin:0 1.25rem !default;
+$dividerVerticalPadding:1.25rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$highlightBg !default;
+$scrollTopHoverBg:scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.03) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade000 !default;
+$speedDialActionHoverBg: $shade100 !default;
+$speedDialActionTextColor: $shade900 !default;
+$speedDialActionTextHoverColor: $shade900 !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #1d1e27;
+    --surface-50: #34343d;
+    --surface-100: #4a4b52;
+    --surface-200: #616268;
+    --surface-300: #77787d;
+    --surface-400: #8e8f93;
+    --surface-500: #a5a5a9;
+    --surface-600: #bbbcbe;
+    --surface-700: #d2d2d4;
+    --surface-800: #e8e9e9;
+    --surface-900: #ffffff;
+    --gray-50: #e8e9e9;
+    --gray-100: #d2d2d4;
+    --gray-200: #bbbcbe;
+    --gray-300: #a5a5a9;
+    --gray-400: #8e8f93;
+    --gray-500: #77787d;
+    --gray-600: #616268;
+    --gray-700: #4a4b52;
+    --gray-800: #34343d;
+    --gray-900: #1d1e27;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#1d1e27;
+    --surface-section:#1d1e27;
+    --surface-card:#282936;
+    --surface-overlay:#282936;
+    --surface-border:#3e4053;
+    --surface-hover:rgba(255,255,255,.03);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
\ No newline at end of file
diff --git a/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff
new file mode 100644
index 0000000..46d4244
Binary files /dev/null and b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff differ
diff --git a/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2
new file mode 100644
index 0000000..f1c62e0
Binary files /dev/null and b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 differ
diff --git a/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff
new file mode 100644
index 0000000..e8d62dd
Binary files /dev/null and b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff differ
diff --git a/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..5ba583e
Binary files /dev/null and b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 differ
diff --git a/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..c6d3d1d
Binary files /dev/null and b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff differ
diff --git a/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..4153a82
Binary files /dev/null and b/themes/soho/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 differ
diff --git a/themes/soho/soho-dark/theme.scss b/themes/soho/soho-dark/theme.scss
new file mode 100644
index 0000000..1f44de2
--- /dev/null
+++ b/themes/soho/soho-dark/theme.scss
@@ -0,0 +1,4 @@
+@import './_variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/soho/soho-light/_extensions.scss b/themes/soho/soho-light/_extensions.scss
new file mode 100644
index 0000000..478155e
--- /dev/null
+++ b/themes/soho/soho-light/_extensions.scss
@@ -0,0 +1,114 @@
+/* Customizations to the designer theme should be defined here */
+.p-datepicker {
+    .p-datepicker-header {
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            color: $primaryTextColor;
+
+            &:enabled:hover {
+                color: $primaryTextColor;
+                background-color: rgba(255,255,255,.2);
+            }
+        }
+    }
+
+    &.p-datepicker-multiple-month {
+        .p-datepicker-group {
+            border-right: 1px solid rgba(255,255,255,.2);
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        border-top: 1px solid rgba(255,255,255,.2);
+
+        .p-button {
+            color: $primaryTextColor;
+
+            &:enabled:hover {
+                color: $primaryTextColor;
+                background-color: rgba(255,255,255,.2);
+            }
+        }
+    }
+
+    .p-timepicker {
+        border-top: 1px solid rgba(255,255,255,.2);
+
+        .p-link {
+            color: $primaryTextColor;
+
+            &:enabled:hover {
+                color: $primaryTextColor;
+                background-color: rgba(255,255,255,.2);
+            }
+        }
+    }
+
+    table {
+        font-size: $fontSize;
+        margin: $calendarTableMargin;
+
+        th {
+            color: rgba(255,255,255,.7);
+        }
+
+        td {
+            > span {
+                &.p-highlight {
+                    color: $primaryTextColor;
+                    background: rgba(255,255,255,.3);
+                }
+            }
+
+            &.p-datepicker-today {
+                > span {
+                    &.p-highlight {
+                        color: $primaryTextColor;
+                        background: rgba(255,255,255,.3);
+                    }
+                }
+            }
+        }
+    }
+
+    .p-monthpicker {
+        .p-monthpicker-month {
+            &.p-highlight {
+                color: $primaryTextColor;
+                background: rgba(255,255,255,.3);
+            }
+        }
+    }
+}
+
+.p-button {
+    .p-button-label {
+        font-weight: 700;
+    }
+}
+
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/soho/soho-light/_fonts.scss b/themes/soho/soho-light/_fonts.scss
new file mode 100644
index 0000000..416b812
--- /dev/null
+++ b/themes/soho/soho-light/_fonts.scss
@@ -0,0 +1,27 @@
+/* lato-300 - latin-ext_latin */
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Lato Light'), local('Lato-Light'),
+         url('./fonts/lato-v17-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/lato-v17-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* lato-regular - latin-ext_latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Lato Regular'), local('Lato-Regular'),
+         url('./fonts/lato-v17-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/lato-v17-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* lato-700 - latin-ext_latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Lato Bold'), local('Lato-Bold'),
+         url('./fonts/lato-v17-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/lato-v17-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
\ No newline at end of file
diff --git a/themes/soho/soho-light/_variables.scss b/themes/soho/soho-light/_variables.scss
new file mode 100644
index 0000000..aa37bdc
--- /dev/null
+++ b/themes/soho/soho-light/_variables.scss
@@ -0,0 +1,885 @@
+$primaryColor: #7254f3 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #e2dcfc !default;
+$highlightTextColor: #7254f3 !default;
+
+$colors: (
+    "blue": #54B0F3,
+    "green": #29C76F,
+    "yellow": #F3D054,
+    "cyan": #3EC9D6,
+    "pink": #EA5455,
+    "indigo": #5464F3,
+    "teal": #0DC381,
+    "orange": #FF9F42,
+    "bluegray": #6878A0,
+    "purple": #7254F3,
+    "red": #FF384B,
+    "primary": $primaryColor
+) !default;
+
+//reused color variables
+$shade000:#ffffff !default;    //surface
+$shade100:#eff3f8 !default;    //header background
+$shade200:#f6f9fc !default;    //hover background
+$shade300:#dfe7ef !default;    //border, divider
+$shade400:#d3dbe3 !default;    //input border
+$shade500:#c6ccd7 !default;    //input icon
+$shade600:#708da9 !default;    //text secondary color
+$shade700:#043d75 !default;    //text color
+$shade800:#343a40 !default;    //unused
+$shade900:#212529 !default;    //unused
+
+//global
+$fontFamily:Lato, Helvetica, sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:6px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#ff6767 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:$shade200 !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.75rem .75rem !default;
+$inputTextFontSize:1rem !default;
+
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade200 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$shade000 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth: 3rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.75rem 0 !default;
+$inputListItemPadding:.75rem 1.25rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.25rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade600 !default;
+$inputListHeaderBorder:1px solid $shade300 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;
+$inputOverlayShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+
+//password
+$passwordMeterBg:$shade300 !default;
+$passwordWeakBg:#ea5455 !default;
+$passwordMediumBg:#ff9f42 !default;
+$passwordStrongBg:#29c76f !default;
+
+//button
+$buttonPadding:.75rem 1.25rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:.75rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#a1c30d !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#5486f3 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#29c76f !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#ff9f42 !default;
+$warningButtonTextColor:#ffffff !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#3ec9d6 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#ea5455 !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:22px !default;
+$checkboxHeight:22px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:22px !default;
+$radiobuttonHeight:22px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorder:1px solid #191919 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade600 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade700 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#ea5455 !default;
+$ratingCancelIconHoverColor:#e73d3e !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:linear-gradient(90deg, $primaryColor 0%, scale-color($primaryColor, $red: 25%) 100%) !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$primaryTextColor !default;
+$calendarBorder:0 none !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:transparent !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid rgba(255,255,255,.2) !default;
+$calendarHeaderTextColor:$primaryTextColor !default;
+$calendarHeaderFontWeight:700 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:rgba(255,255,255,.2) !default;
+$calendarCellDateTodayBg:rgba(255,255,255,.1) !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryTextColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade600 !default;
+$panelHeaderFontWeight:700 !default;
+$panelHeaderPadding:1.25rem !default;
+$panelToggleableHeaderPadding:.75rem 1.25rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade600 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg:scale-color($panelContentBg, $lightness: -1%) !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.75rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:4px !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$panelHeaderTextColor !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade700 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade700 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$shade500 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1.25rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1.25rem 0 !default;
+$cardFooterPadding:1.25rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade200 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade700 !default;
+$paginatorElementBorderRadius:50% !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade300 !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade600 !default;
+$tableHeaderFontWeight:700 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade600 !default;
+$tableHeaderCellFontWeight:700 !default;
+$tableHeaderCellBorder:1px solid $shade300 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade600 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:1px solid $shade300 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade600 !default;
+$tableFooterCellFontWeight:700 !default;
+$tableFooterCellBorder:1px solid $shade300 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade300 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade600 !default;
+$tableFooterFontWeight:700 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade300 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$primaryTextColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1.25rem 1.75rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:400 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#e9e9ff !default;
+$infoMessageBorder:solid #696cff !default;
+$infoMessageTextColor:#696cff !default;
+$infoMessageIconColor:#696cff !default;
+$successMessageBg:#e4f8f0 !default;
+$successMessageBorder:solid #1ea97c !default;
+$successMessageTextColor:#1ea97c !default;
+$successMessageIconColor:#1ea97c !default;
+$warningMessageBg:#fff2e2 !default;
+$warningMessageBorder:solid #cc8925 !default;
+$warningMessageTextColor:#cc8925 !default;
+$warningMessageIconColor:#cc8925 !default;
+$errorMessageBg:#ffe7e6 !default;
+$errorMessageBorder:solid #ff5757 !default;
+$errorMessageTextColor:#ff5757 !default;
+$errorMessageIconColor:#ff5757 !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade600 !default;
+$dialogHeaderFontWeight:700 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade700 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:1px solid $shade200 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:700 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade100 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.75rem 1.25rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade700 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$highlightTextColor !default;
+$menuitemIconActiveColor:$highlightTextColor !default;
+$menuitemActiveBg:$highlightBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1.25rem !default;
+$submenuHeaderBg:$shade100 !default;
+$submenuHeaderTextColor:$shade600 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade400 !default;
+$carouselIndicatorHoverBg:$shade500 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade400 !default;
+$galleriaIndicatorHoverBg:$shade500 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1.25rem 0 !default;
+$dividerHorizontalPadding:0 1.25rem !default;
+$dividerVerticalMargin:0 1.25rem !default;
+$dividerVerticalPadding:1.25rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade300 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: #022354 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade700};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #f1f4f6;
+    --surface-100: #e2e8ee;
+    --surface-200: #c6d1dd;
+    --surface-300: #a9bbcb;
+    --surface-400: #8da4ba;
+    --surface-500: #708da9;
+    --surface-600: #5a7187;
+    --surface-700: #435565;
+    --surface-800: #2d3844;
+    --surface-900: #161c22;
+    --gray-50: #f1f4f6;
+    --gray-100: #e2e8ee;
+    --gray-200: #c6d1dd;
+    --gray-300: #a9bbcb;
+    --gray-400: #8da4ba;
+    --gray-500: #708da9;
+    --gray-600: #5a7187;
+    --gray-700: #435565;
+    --gray-800: #2d3844;
+    --gray-900: #161c22;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#eff3f8;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dfe7ef;
+    --surface-hover:#f6f9fc;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
diff --git a/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-300.woff b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-300.woff
new file mode 100644
index 0000000..46d4244
Binary files /dev/null and b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-300.woff differ
diff --git a/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2
new file mode 100644
index 0000000..f1c62e0
Binary files /dev/null and b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 differ
diff --git a/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-700.woff b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-700.woff
new file mode 100644
index 0000000..e8d62dd
Binary files /dev/null and b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-700.woff differ
diff --git a/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..5ba583e
Binary files /dev/null and b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 differ
diff --git a/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..c6d3d1d
Binary files /dev/null and b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff differ
diff --git a/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..4153a82
Binary files /dev/null and b/themes/soho/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 differ
diff --git a/themes/soho/soho-light/theme.scss b/themes/soho/soho-light/theme.scss
new file mode 100644
index 0000000..1f44de2
--- /dev/null
+++ b/themes/soho/soho-light/theme.scss
@@ -0,0 +1,4 @@
+@import './_variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/tailwind/tailwind-light/_extensions.scss b/themes/tailwind/tailwind-light/_extensions.scss
new file mode 100644
index 0000000..ab6d099
--- /dev/null
+++ b/themes/tailwind/tailwind-light/_extensions.scss
@@ -0,0 +1,121 @@
+/* Customizations to the designer theme should be defined here */
+@mixin focused-ring($ring-color) {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
+}
+
+.p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup {
+    box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.p-inputgroup {
+    .p-inputtext, .p-togglebutton, .p-selectbutton {
+        box-shadow: none;
+    }
+}
+
+.p-inputtext {
+    &.p-invalid.p-component:enabled:focus {
+        box-shadow: 0 0 0 1px $inputErrorBorderColor;
+    }
+}
+
+.p-highlight {
+    font-weight: 600;
+}
+
+.p-button-label {
+    font-weight: 500;
+}
+
+.p-inputswitch {
+    &.p-focus {
+        .p-inputswitch-slider {
+            box-shadow: 0 0 0 2px $focusOutlineColor;
+        }
+    }
+}
+
+.p-paginator {
+    .p-paginator-pages {
+        .p-paginator-page {
+            margin-left: -1px;
+
+            &.p-highlight {
+                border-color: $primaryColor;
+                margin-right: 1px;
+            }
+        }
+    }
+
+    .p-paginator-current {
+        border: 0 none;
+    }
+}
+
+.p-button {
+    &:focus {
+        @include focused-ring($focusOutlineColor);
+    }
+
+    &.p-button-secondary:enabled:focus {
+        @include focused-ring($secondaryButtonBg);
+    }
+
+    &.p-button-success:enabled:focus {
+        @include focused-ring($successButtonBg);
+    }
+
+    &.p-button-info:enabled:focus {
+        @include focused-ring($infoButtonBg);
+    }
+
+    &.p-button-warning:enabled:focus {
+        @include focused-ring($warningButtonBg);
+    }
+
+    &.p-button-help:enabled:focus {
+        @include focused-ring($helpButtonBg);
+    }
+
+    &.p-button-danger:enabled:focus {
+        @include focused-ring($dangerButtonBg);
+    }
+}
+
+.p-checkbox {
+    .p-checkbox-box {
+        border-radius: .25rem;
+    }
+
+    &:not(.p-checkbox-disabled) {
+        .p-checkbox-box {
+            &.p-focus {
+                @include focused-ring($focusOutlineColor);
+            }
+        }
+    }
+}
+
+.p-radiobutton {
+    &:not(.p-radiobutton-disabled) {
+        .p-radiobutton-box {
+            &.p-focus {
+                @include focused-ring($focusOutlineColor);
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/tailwind/tailwind-light/_fonts.scss b/themes/tailwind/tailwind-light/_fonts.scss
new file mode 100644
index 0000000..c7120ad
--- /dev/null
+++ b/themes/tailwind/tailwind-light/_fonts.scss
@@ -0,0 +1,40 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: local(''),
+       url('./fonts/Inter-Light.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/Inter-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('./fonts/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: local(''),
+       url('./fonts/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+       url('./fonts/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/Inter-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('./fonts/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
\ No newline at end of file
diff --git a/themes/tailwind/tailwind-light/_variables.scss b/themes/tailwind/tailwind-light/_variables.scss
new file mode 100644
index 0000000..390f77e
--- /dev/null
+++ b/themes/tailwind/tailwind-light/_variables.scss
@@ -0,0 +1,897 @@
+$primaryColor: #4F46E5 !default;
+$primaryDarkColor: #4338CA !default;
+$primaryDarkerColor: #3730A3 !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #EEF2FF !default;
+$highlightTextColor: #312E81 !default;
+
+$colors: (
+    "blue": #3B82F6,
+    "green": #22C55E,
+    "yellow": #EAB308,
+    "cyan": #06B6D4,
+    "pink": #EC4899,
+    "indigo": #6366F1,
+    "teal": #14B8A6,
+    "orange": #F97316,
+    "bluegray": #64748B,
+    "purple": #A855F7,
+    "red": #EF4444,
+    "primary": $primaryColor
+);
+
+//reused color variables
+$shade000:#ffffff !default;    //surface
+$shade100:#fafafa !default;    //header background      //updated: gray-50
+$shade200:#f4f4f5 !default;    //hover background       //updated: gray-100
+$shade300:#e5e7eb !default;    //border, divider        //updated  coolgray-200
+$shade400:#d4d4d8 !default;    //input border           //updated: gray-300
+$shade500:#6b7280 !default;    //input icon             //updated: coolgray500
+$shade600:#71717A !default;    //text secondary color   //updated: gray-500
+$shade700:#3f3f46 !default;    //text color             //updated: gray-700
+$shade800:#27272A !default;    //unused                 gray-800
+$shade900:#18181B !default;    //unused                 gray-900
+
+//global
+$fontFamily:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:.375rem !default;
+$transitionDuration:.2s !default;
+$formElementTransition:none !default;
+$actionIconTransition:none !default;
+$listItemTransition:none !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid #f3f4f6 !default;    //coolgray-100
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#e24c4c !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:#6366F1 !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:$shade200 !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade900 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.75rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$shade400 !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:#f0a9a7 !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade100 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$shade000 !default;
+
+//input groups
+$inputGroupBg:$shade100 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth:3rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.25rem 0 !default;
+$inputListItemPadding:.75rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade900 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem .75rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade700 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:0 0 #0000,0 0 #0000,0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
+
+//password
+$passwordMeterBg:$shade300 !default;
+$passwordWeakBg:#EF4444 !default;
+$passwordMediumBg:#F59E0B !default;
+$passwordStrongBg:#22C55E !default;
+
+//button
+$buttonPadding:.75rem 1rem !default;
+$buttonIconOnlyWidth:3rem !default;
+$buttonIconOnlyPadding:.75rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkColor !default;
+$raisedButtonShadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#64748B !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:#475569 !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:#475569 !default;
+$secondaryButtonActiveBg:#475569 !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:#475569 !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#3B82F6 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:#2563EB !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:#2563EB !default;
+$infoButtonActiveBg:#2563EB !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:#2563EB !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#22C55E !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:#16A34A !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:#16A34A !default;
+$successButtonActiveBg:#16A34A !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:#16A34A !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#F59E0B !default;
+$warningButtonTextColor:#ffffff !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:#D97706 !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:#D97706 !default;
+$warningButtonActiveBg:#D97706 !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:#D97706 !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#A855F7 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:#9333EA !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:#9333EA !default;
+$helpButtonActiveBg:#9333EA !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:#9333EA !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#EF4444 !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:#DC2626 !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:#DC2626 !default;
+$dangerButtonActiveBg:#DC2626 !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:#DC2626 !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:16px !default;
+$checkboxHeight:16px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:10px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryColor !default;
+
+//radiobutton
+$radiobuttonWidth:16px !default;
+$radiobuttonHeight:16px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:6px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade900 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade600 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade900 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#EF4444 !default;
+$ratingCancelIconHoverColor:#DC2626 !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade700 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade000 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade700 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade700 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade700 !default;
+$panelHeaderFontWeight:700 !default;
+$panelHeaderPadding:1.25rem !default;
+$panelToggleableHeaderPadding:.75rem 1.25rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade900 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg:scale-color($panelContentBg, $lightness: -1%) !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.75rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade700 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade700 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade700 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$shade600 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1.25rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1.25rem 0 !default;
+$cardFooterPadding:1.25rem 0 0 0 !default;
+$cardShadow:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade200 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.75rem 1.5rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:1px solid $shade400 !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:$shade400 !default;
+$paginatorElementIconHoverColor:$shade700 !default;
+$paginatorElementBorderRadius:0 !default;
+$paginatorElementMargin:0 0 0 -1px !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade200 !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade700 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1.25rem 1.25rem !default;
+
+$tableHeaderCellPadding:.75rem 1.5rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade500 !default;
+$tableHeaderCellFontWeight:500 !default;
+$tableHeaderCellBorder:1px solid $shade200 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade700 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade100 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:1px solid $shade200 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1.5rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade700 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade200 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade200 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade700 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:.75rem 1.5rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade200 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryColor !default;
+$fullCalendarEventBorderColor: $primaryColor !default;
+$fullCalendarEventBorder:1px solid $primaryColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0 !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade000 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1.25rem 1.75rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#EFF6FF !default;
+$infoMessageBorder:none !default;
+$infoMessageTextColor:#2563EB !default;
+$infoMessageIconColor:#2563EB !default;
+$successMessageBg:#ECFDF5 !default;
+$successMessageBorder:none !default;
+$successMessageTextColor:#059669 !default;
+$successMessageIconColor:#059669 !default;
+$warningMessageBg:#FEF3C7 !default;
+$warningMessageBorder:none !default;
+$warningMessageTextColor:#D97706 !default;
+$warningMessageIconColor:#D97706 !default;
+$errorMessageBg:#FEF3C7 !default;
+$errorMessageBorder:none !default;
+$errorMessageTextColor:#DC2626 !default;
+$errorMessageIconColor:#DC2626 !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade700 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.5rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 1.5rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$shade700 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:1px solid $shade200 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade900 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$shade700 !default;
+$menuitemIconActiveColor:$shade600 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade700 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 0 #0000,0 0 #0000,0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:1rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade200 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade800 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade700};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #FAFAFA;
+    --surface-100: #F4F4F5;
+    --surface-200: #E4E4E7;
+    --surface-300: #D4D4D8;
+    --surface-400: #A1A1AA;
+    --surface-500: #71717A;
+    --surface-600: #52525B;
+    --surface-700: #3F3F46;
+    --surface-800: #27272A;
+    --surface-900: #18181B;
+    --gray-50: #FAFAFA;
+    --gray-100: #F4F4F5;
+    --gray-200: #E4E4E7;
+    --gray-300: #D4D4D8;
+    --gray-400: #A1A1AA;
+    --gray-500: #71717A;
+    --gray-600: #52525B;
+    --gray-700: #3F3F46;
+    --gray-800: #27272A;
+    --gray-900: #18181B;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#FAFAFA;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#e5e7eb;
+    --surface-hover: #f4f4f5;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Bold.woff b/themes/tailwind/tailwind-light/fonts/Inter-Bold.woff
new file mode 100644
index 0000000..eaf3d4b
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Bold.woff differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Bold.woff2 b/themes/tailwind/tailwind-light/fonts/Inter-Bold.woff2
new file mode 100644
index 0000000..2846f29
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Bold.woff2 differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Light.woff b/themes/tailwind/tailwind-light/fonts/Inter-Light.woff
new file mode 100644
index 0000000..c496464
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Light.woff differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Light.woff2 b/themes/tailwind/tailwind-light/fonts/Inter-Light.woff2
new file mode 100644
index 0000000..bc4be66
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Light.woff2 differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Medium.woff b/themes/tailwind/tailwind-light/fonts/Inter-Medium.woff
new file mode 100644
index 0000000..d546843
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Medium.woff differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Medium.woff2 b/themes/tailwind/tailwind-light/fonts/Inter-Medium.woff2
new file mode 100644
index 0000000..f92498a
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Medium.woff2 differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Regular.woff b/themes/tailwind/tailwind-light/fonts/Inter-Regular.woff
new file mode 100644
index 0000000..62d3a61
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Regular.woff differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-Regular.woff2 b/themes/tailwind/tailwind-light/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000..6c2b689
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-Regular.woff2 differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-SemiBold.woff b/themes/tailwind/tailwind-light/fonts/Inter-SemiBold.woff
new file mode 100644
index 0000000..a815f43
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-SemiBold.woff differ
diff --git a/themes/tailwind/tailwind-light/fonts/Inter-SemiBold.woff2 b/themes/tailwind/tailwind-light/fonts/Inter-SemiBold.woff2
new file mode 100644
index 0000000..611e90c
Binary files /dev/null and b/themes/tailwind/tailwind-light/fonts/Inter-SemiBold.woff2 differ
diff --git a/themes/tailwind/tailwind-light/theme.scss b/themes/tailwind/tailwind-light/theme.scss
new file mode 100644
index 0000000..1f44de2
--- /dev/null
+++ b/themes/tailwind/tailwind-light/theme.scss
@@ -0,0 +1,4 @@
+@import './_variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/vela/_extensions.scss b/themes/vela/_extensions.scss
new file mode 100644
index 0000000..7ad12f7
--- /dev/null
+++ b/themes/vela/_extensions.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            .p-galleria-indicator {
+                &.p-highlight {
+                    button {
+                        background: $primaryColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/vela/_variables.scss b/themes/vela/_variables.scss
new file mode 100644
index 0000000..ade60b4
--- /dev/null
+++ b/themes/vela/_variables.scss
@@ -0,0 +1,879 @@
+$colors: (
+    "blue": #2196F3,
+    "green": #4caf50,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #3F51B5,
+    "teal": #009688,
+    "orange": #F57C00,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #FF4032,
+    "primary": $primaryColor
+) !default;
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade600:#304562 !default;  //input bg, border, divider
+$shade700:#283951 !default;  //unused
+$shade800:#1f2d40 !default;  //elevated surface
+$shade900:#17212f !default;  //ground surface
+
+$hoverBg:rgba(255,255,255,.03) !default;
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:3px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default; //spacing between inline elements
+$disabledOpacity:.4 !default; //opacity of a disabled item
+$maskBg:rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize:2rem !default;
+$errorColor:#ef9a9a !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: $hoverBg !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .5rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:1px solid $shade600 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$inputFilledBg !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#F48FB1 !default;
+$passwordMediumBg:#FFE082 !default;
+$passwordStrongBg:#C5E1A5 !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#78909C !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 1px scale-color($secondaryButtonBg, $lightness: 30%) !default;
+
+$infoButtonBg:#81D4FA !default;
+$infoButtonTextColor:#121212 !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 1px scale-color($infoButtonBg, $lightness: 30%) !default;
+
+$successButtonBg:#C5E1A5 !default;
+$successButtonTextColor:#121212 !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 1px scale-color($successButtonBg, $lightness: 30%) !default;
+
+$warningButtonBg:#FFE082 !default;
+$warningButtonTextColor:#121212 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 1px scale-color($warningButtonBg, $lightness: 30%) !default;
+
+$helpButtonBg:#CE93D8 !default;
+$helpButtonTextColor:#121212 !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;
+
+$dangerButtonBg:#F48FB1 !default;
+$dangerButtonTextColor:#121212 !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 1px scale-color($dangerButtonBg, $lightness: 30%) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.1rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:#ffffff !default;
+
+//togglebutton
+$toggleButtonBg:$shade800 !default;
+$toggleButtonBorder:1px solid $shade600 !default;
+$toggleButtonTextColor:$shade000 !default;
+$toggleButtonIconColor:$shade100 !default;
+$toggleButtonHoverBg:$hoverBg !default;
+$toggleButtonHoverBorderColor:$shade600 !default;
+$toggleButtonTextHoverColor:$shade000 !default;
+$toggleButtonIconHoverColor:$shade100 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#F48FB1 !default;
+$ratingCancelIconHoverColor:#F48FB1 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade600 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade600 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$hoverBg !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade600 !default;
+$panelHeaderBorder:1px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:1px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,0.01) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade600 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade600 transparent !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$primaryColor !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$shade800 !default;
+$tabviewContentTextColor:$shade000 !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:700 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$shade100 !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:1px !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:2.286em !default;
+$paginatorElementHeight:2.286em !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade100 !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade000 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade600 !default;
+$tableHeaderBorderWidth:0 0 1px 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade600 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$shade800 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$hoverBg !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:#253144 !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:1px solid $shade600 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade600 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:1px solid $shade600 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:1px 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade600 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//datascroller
+$dataScrollerContentPadding:0 !default;
+$dataScrollerContentBorder:0 none !default;
+$dataScrollerListItemBorder:solid $shade600 !default;
+$dataScrollerListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0 !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade800 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade100 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:1px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:none !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#B3E5FC !default;
+$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
+$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$successMessageBg:#C8E6C9 !default;
+$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
+$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$warningMessageBg:#FFECB3 !default;
+$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
+$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$errorMessageBg:#FFCDD2 !default;
+$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
+$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder:1px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:0 none !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade800 !default;
+$menuBorder:1px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextActiveColor:$shade000 !default;
+$menuitemIconActiveColor:$shade000 !default;
+$menuitemActiveBg:$shade900 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade800 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid $shade600 !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$menuBg !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:$hoverBg !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:#f8f9fa !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:#f8f9fa !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:#f8f9fa !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:#f8f9fa !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:#f8f9fa !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade600 !default;
+$galleriaIndicatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$highlightBg !default;
+$scrollTopHoverBg:scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.03) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade000 !default;
+$speedDialActionHoverBg: $shade100 !default;
+$speedDialActionTextColor: $shade900 !default;
+$speedDialActionTextHoverColor: $shade900 !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #17212f;
+    --surface-50: #2e3744;
+    --surface-100: #454d59;
+    --surface-200: #5d646d;
+    --surface-300: #747a82;
+    --surface-400: #8b9097;
+    --surface-500: #a2a6ac;
+    --surface-600: #b9bcc1;
+    --surface-700: #d1d3d5;
+    --surface-800: #e8e9ea;
+    --surface-900: #ffffff;
+    --gray-50:#e8e9ea;
+    --gray-100: #d1d3d5;
+    --gray-200: #b9bcc1;
+    --gray-300: #a2a6ac;
+    --gray-400: #8b9097;
+    --gray-500: #747a82;
+    --gray-600: #5d646d;
+    --gray-700: #454d59;
+    --gray-800: #2e3744;
+    --gray-900: #17212f;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#17212f;
+    --surface-section:#17212f;
+    --surface-card:#1f2d40;
+    --surface-overlay:#1f2d40;
+    --surface-border:#304562;
+    --surface-hover:rgba(255,255,255,.03);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light dark;
+}
\ No newline at end of file
diff --git a/themes/vela/vela-blue/_extensions.scss b/themes/vela/vela-blue/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/vela/vela-blue/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/vela/vela-blue/_fonts.scss b/themes/vela/vela-blue/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/vela/vela-blue/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/vela/vela-blue/_variables.scss b/themes/vela/vela-blue/_variables.scss
new file mode 100644
index 0000000..7bd36c8
--- /dev/null
+++ b/themes/vela/vela-blue/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #64B5F6 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: rgba(100, 181, 246, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/vela/vela-blue/theme.scss b/themes/vela/vela-blue/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/vela/vela-blue/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/vela/vela-green/_extensions.scss b/themes/vela/vela-green/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/vela/vela-green/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/vela/vela-green/_fonts.scss b/themes/vela/vela-green/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/vela/vela-green/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/vela/vela-green/_variables.scss b/themes/vela/vela-green/_variables.scss
new file mode 100644
index 0000000..e16b429
--- /dev/null
+++ b/themes/vela/vela-green/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #81C784 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: rgba(129, 199, 132, .16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/vela/vela-green/theme.scss b/themes/vela/vela-green/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/vela/vela-green/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/vela/vela-orange/_extensions.scss b/themes/vela/vela-orange/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/vela/vela-orange/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/vela/vela-orange/_fonts.scss b/themes/vela/vela-orange/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/vela/vela-orange/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/vela/vela-orange/_variables.scss b/themes/vela/vela-orange/_variables.scss
new file mode 100644
index 0000000..7efe535
--- /dev/null
+++ b/themes/vela/vela-orange/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #FFD54F !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #212529 !default;
+
+$highlightBg: rgba(255, 213, 79, 0.16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/vela/vela-orange/theme.scss b/themes/vela/vela-orange/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/vela/vela-orange/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/vela/vela-purple/_extensions.scss b/themes/vela/vela-purple/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/vela/vela-purple/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/vela/vela-purple/_fonts.scss b/themes/vela/vela-purple/_fonts.scss
new file mode 100644
index 0000000..e38a3a6
--- /dev/null
+++ b/themes/vela/vela-purple/_fonts.scss
@@ -0,0 +1 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
\ No newline at end of file
diff --git a/themes/vela/vela-purple/_variables.scss b/themes/vela/vela-purple/_variables.scss
new file mode 100644
index 0000000..f7c4649
--- /dev/null
+++ b/themes/vela/vela-purple/_variables.scss
@@ -0,0 +1,10 @@
+$primaryColor: #BA68C8 !default;
+$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: rgba(186, 104, 200, 0.16) !default;
+$highlightTextColor: rgba(255,255,255,.87) !default;
+
+@import '../_variables';
diff --git a/themes/vela/vela-purple/theme.scss b/themes/vela/vela-purple/theme.scss
new file mode 100644
index 0000000..afd8074
--- /dev/null
+++ b/themes/vela/vela-purple/theme.scss
@@ -0,0 +1,4 @@
+@import './variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/viva/_extensions.scss b/themes/viva/_extensions.scss
new file mode 100644
index 0000000..fc111be
--- /dev/null
+++ b/themes/viva/_extensions.scss
@@ -0,0 +1,196 @@
+
+/* Customizations to the designer theme should be defined here */
+.p-button {
+    .p-button-label {
+        font-weight: 600;
+    }
+}
+
+.p-buttonset,
+.p-togglebutton {
+    .p-button-label {
+        font-weight: 400;
+    }
+}
+
+.p-carousel {
+    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-galleria {
+    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+        background-color: $primaryColor;
+    }
+}
+
+.p-panel {
+    border: $panelContentBorder;
+    border-radius: $borderRadius;
+
+    .p-panel-header {
+        border: 0 none;
+    }
+
+    .p-panel-content {
+        border: 0 none;
+    }
+}
+
+.p-fieldset {
+    .p-fieldset-legend {
+        border-color: transparent;
+    }
+}
+
+.p-accordion {
+    .p-accordion-toggle-icon {
+        order: 10;
+        margin-left: auto;
+
+        &.pi-chevron-right::before {
+            content: "\e90d";
+        }
+
+        &.pi-chevron-down::before {
+            content: "\e90f";
+        }
+    }
+
+    .p-accordion-header {
+        &.p-highlight {
+            .p-accordion-header-link {
+                padding-bottom: calc(1rem + 2px);
+                border-bottom: 0 none;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            &:hover {
+                .p-accordion-header-link {
+                    border-bottom: 0 none;
+                }
+            }
+        }
+    }
+}
+
+.p-inline-message {
+    &.p-inline-message-info {
+        border-color: $infoMessageBg;
+    }
+
+    &.p-inline-message-success {
+        border-color: $successMessageBg;
+    }
+
+    &.p-inline-message-warn {
+        border-color: $warningMessageBg;
+    }
+
+    &.p-inline-message-error {
+        border-color: $errorMessageBg;
+    }
+}
+
+.p-inputtext {
+    &:enabled:focus {
+        box-shadow: none;
+    }
+}
+
+.p-dropdown {
+    &:not(.p-disabled).p-focus {
+        box-shadow: none;
+    }
+}
+
+.p-multiselect {
+    &:not(.p-disabled).p-focus {
+        box-shadow: none;
+    }
+}
+
+.p-cascadeselect {
+    &:not(.p-disabled).p-focus {
+        box-shadow: none;
+    }
+}
+
+.p-autocomplete {
+    &.p-autocomplete-multiple {
+        &:not(.p-disabled).p-focus {
+            box-shadow: none;
+        }
+    }
+}
+
+.p-chips {
+    .p-chips-multiple-container {
+        &:not(.p-disabled).p-focus {
+            box-shadow: none;
+        }
+    }
+}
+
+.p-orderlist {
+    .p-orderlist-list {
+        border-top: 0 none;
+    }
+}
+
+.p-picklist {
+    .p-picklist-list {
+        border-top: 0 none;
+    }
+}
+
+.p-panelmenu {
+    .p-panelmenu-icon {
+        &.pi-chevron-right,
+        &.pi-chevron-down {
+            order: 10;
+            margin-left: auto;
+        }
+
+        &.pi-chevron-right::before {
+            content: "\e90d";
+        }
+
+        &.pi-chevron-down::before {
+            content: "\e90f";
+        }
+    }
+
+    .p-panelmenu-header {
+        &.p-highlight {
+            > a {
+                padding-bottom: calc(1rem + 2px);
+                border-bottom: 0 none;
+            }
+        }
+        
+
+        &:not(.p-highlight):not(.p-disabled) {
+            > a:hover {
+                padding-bottom: calc(1rem + 2px);
+                border-bottom: 0 none;
+            }
+        }
+    }
+}
+
+.p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $primaryColor;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $primaryColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/viva/viva-dark/_extensions.scss b/themes/viva/viva-dark/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/viva/viva-dark/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/viva/viva-dark/_fonts.scss b/themes/viva/viva-dark/_fonts.scss
new file mode 100644
index 0000000..44441d7
--- /dev/null
+++ b/themes/viva/viva-dark/_fonts.scss
@@ -0,0 +1,36 @@
+/* poppins-300 - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 300;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-regular - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 400;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-600 - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 600;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 700;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
\ No newline at end of file
diff --git a/themes/viva/viva-dark/_variables.scss b/themes/viva/viva-dark/_variables.scss
new file mode 100644
index 0000000..2f74618
--- /dev/null
+++ b/themes/viva/viva-dark/_variables.scss
@@ -0,0 +1,883 @@
+$primaryColor: #9eade6 !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #121212 !default;
+
+$highlightBg:rgba($primaryColor, .16) !default;
+$highlightTextColor:$primaryColor !default;
+
+$colors: (
+    "blue": #54A6D4,
+    "green": #8BAE2C,
+    "yellow": #FFD02A,
+    "cyan": #35A4CC,
+    "pink": #D45472,
+    "indigo": #5472D4,
+    "teal": #3FBFA0,
+    "orange": #FF922A,
+    "bluegray": #8191A6,
+    "purple": #7654D4,
+    "red": #FF5D44,
+    "primary": $primaryColor
+) !default;
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade500:#2d3e44 !default;
+$shade600:#263238 !default;  //input bg, border, divider
+$shade700:#1e282c !default;  //unused
+$shade800:#161d21 !default;  //elevated surface
+$shade900:#0e1315 !default;  //ground surface
+
+$hoverBg:rgba($primaryColor, .08) !default;
+
+//global
+$fontFamily:Poppins, sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:6px !default;
+$transitionDuration:.3s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default; //spacing between inline elements
+$disabledOpacity:.4 !default; //opacity of a disabled item
+$maskBg:rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize:2rem !default;
+$errorColor:#f78c79 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: $hoverBg !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:2px solid $shade600 !default;
+$inputHoverBorderColor:$shade500 !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$inputFilledBg !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:2.857rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem .5rem !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:6px !default;
+$inputListItemMargin:0 0 4px 0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1.5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#e693a9 !default;
+$passwordMediumBg:#ffe08a !default;
+$passwordStrongBg:#cede9c !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.857rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:2px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:2px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#b4bfcd !default;
+$secondaryButtonTextColor:$shade900 !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:1px scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#35a4cc !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 1px scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#cede9c !default;
+$successButtonTextColor:$shade900 !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 1px scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#ffe08a !default;
+$warningButtonTextColor:$shade900 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 1px scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#b09ce5 !default;
+$helpButtonTextColor:$shade900 !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 1px scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#e693a9 !default;
+$dangerButtonTextColor:$shade900 !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 1px scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$shade800 !default;
+$toggleButtonBorder:2px solid $shade600 !default;
+$toggleButtonTextColor:$shade000 !default;
+$toggleButtonIconColor:$shade100 !default;
+$toggleButtonHoverBg:$hoverBg !default;
+$toggleButtonHoverBorderColor:$shade600 !default;
+$toggleButtonTextHoverColor:$shade000 !default;
+$toggleButtonIconHoverColor:$shade100 !default;
+$toggleButtonActiveBg:$highlightBg !default;
+$toggleButtonActiveBorderColor:$highlightBg !default;
+$toggleButtonTextActiveColor:$highlightTextColor !default;
+$toggleButtonIconActiveColor:$highlightTextColor !default;
+$toggleButtonActiveHoverBg:rgba($primaryColor, .24) !default;
+$toggleButtonActiveHoverBorderColor:rgba($primaryColor, .24) !default;
+$toggleButtonTextActiveHoverColor:$highlightTextColor !default;
+$toggleButtonIconActiveHoverColor:$highlightTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#dF7E6C !default;
+$ratingCancelIconHoverColor:#f88c79 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade600 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:6px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:6px !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade600 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$hoverBg !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade600 !default;
+$panelHeaderBorder:2px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:2px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,0.01) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:2px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade600 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade600 transparent !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$primaryColor !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$shade800 !default;
+$tabviewContentTextColor:$shade000 !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:600 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$shade100 !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:2px !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade100 !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade000 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:2px solid $shade600 !default;
+$tableHeaderBorderWidth:0 0 2px 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:2px solid $shade600 !default;
+$tableHeaderCellBorderWidth:0 0 2px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$shade800 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$hoverBg !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:#1b2327 !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:2px solid $shade600 !default;
+$tableBodyCellBorderWidth:0 0 2px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:2px solid $shade600 !default;
+$tableFooterCellBorderWidth:0 0 2px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:2px solid $shade600 !default;
+$tableFooterBorderWidth:0 0 2px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 2px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 2px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade600 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:2px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade100 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade800 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade600 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:400 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:2px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:none !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:600 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#a3d7e6 !default;
+$infoMessageBorder:4px solid #65bcd6 !default;
+$infoMessageTextColor:$shade900 !default;
+$infoMessageIconColor:$shade900 !default;
+$successMessageBg:#bfd47f !default;
+$successMessageBorder:4px solid #a2c044 !default;
+$successMessageTextColor:$shade900 !default;
+$successMessageIconColor:$shade900 !default;
+$warningMessageBg:#ff9c3e !default;
+$warningMessageBorder:4px solid #ff8817 !default;
+$warningMessageTextColor:$shade900 !default;
+$warningMessageIconColor:$shade900 !default;
+$errorMessageBg:#e6a3b2 !default;
+$errorMessageBorder:4px solid #de8499 !default;
+$errorMessageTextColor:$shade900 !default;
+$errorMessageIconColor:$shade900 !default;
+
+//overlays
+$overlayContentBorder:2px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:2px solid $shade600 !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade800 !default;
+$menuBorder:2px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:6px !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextActiveColor:$shade000 !default;
+$menuitemIconActiveColor:$shade000 !default;
+$menuitemActiveBg:$hoverBg !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade800 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:2px solid $shade600 !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.5rem .5rem !default;
+$verticalMenuitemMargin:0 0 4px 0 !default;
+$menuSeparatorMargin:4px 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$menuBg !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:scale-color($shade600, $lightness: 10%) !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:#f8f9fa !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:#f8f9fa !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:#f8f9fa !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:#f8f9fa !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:#f8f9fa !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade600 !default;
+$galleriaIndicatorHoverBg:scale-color($shade600, $lightness: 10%) !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:#f8f9fa !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:$highlightBg !default;
+$scrollTopHoverBg:scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.03) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade600 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #0e1315;
+    --surface-50: #262b2c;
+    --surface-100: #3e4244;
+    --surface-200: #565a5b;
+    --surface-300: #6e7173;
+    --surface-400: #87898a;
+    --surface-500: #9fa1a1;
+    --surface-600: #b7b8b9;
+    --surface-700: #cfd0d0;
+    --surface-800: #e7e7e8;
+    --surface-900: #ffffff;
+    --gray-50: #e7e7e8;
+    --gray-100: #cfd0d0;
+    --gray-200: #b7b8b9;
+    --gray-300: #9fa1a1;
+    --gray-400: #87898a;
+    --gray-500: #6e7173;
+    --gray-600: #565a5b;
+    --gray-700: #3e4244;
+    --gray-800: #262b2c;
+    --gray-900: #0e1315;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#0e1315;
+    --surface-section:#0e1315;
+    --surface-card:#161d21;
+    --surface-overlay:#161d21;
+    --surface-border:#263238;
+    --surface-hover:rgba($primaryColor, .08);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
\ No newline at end of file
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff
new file mode 100644
index 0000000..263ae18
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2
new file mode 100644
index 0000000..5145c1e
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff
new file mode 100644
index 0000000..b33382e
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2
new file mode 100644
index 0000000..1f4ac79
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff
new file mode 100644
index 0000000..2647313
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..4340e26
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..77049f3
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff differ
diff --git a/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..5643f91
Binary files /dev/null and b/themes/viva/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 differ
diff --git a/themes/viva/viva-dark/theme.scss b/themes/viva/viva-dark/theme.scss
new file mode 100644
index 0000000..1f44de2
--- /dev/null
+++ b/themes/viva/viva-dark/theme.scss
@@ -0,0 +1,4 @@
+@import './_variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';
diff --git a/themes/viva/viva-light/_extensions.scss b/themes/viva/viva-light/_extensions.scss
new file mode 100644
index 0000000..2c0ed92
--- /dev/null
+++ b/themes/viva/viva-light/_extensions.scss
@@ -0,0 +1,2 @@
+/* Customizations to the designer theme should be defined here */
+@import '../extensions';
\ No newline at end of file
diff --git a/themes/viva/viva-light/_fonts.scss b/themes/viva/viva-light/_fonts.scss
new file mode 100644
index 0000000..44441d7
--- /dev/null
+++ b/themes/viva/viva-light/_fonts.scss
@@ -0,0 +1,36 @@
+/* poppins-300 - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 300;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-regular - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 400;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-600 - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 600;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin-ext_latin */
+@font-face {
+font-family: 'Poppins';
+font-style: normal;
+font-weight: 700;
+src: local(''),
+     url('./fonts/poppins-v15-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+     url('./fonts/poppins-v15-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
\ No newline at end of file
diff --git a/themes/viva/viva-light/_variables.scss b/themes/viva/viva-light/_variables.scss
new file mode 100644
index 0000000..39824f0
--- /dev/null
+++ b/themes/viva/viva-light/_variables.scss
@@ -0,0 +1,886 @@
+$primaryColor: #5472d4 !default;
+$primaryLightColor: #91a4e3 !default;
+$primaryLighterColor: scale-color($primaryColor, $lightness: 60%) !default;
+$primaryDarkColor: scale-color($primaryColor, $lightness: -5%) !default;
+$primaryDarkerColor: scale-color($primaryColor, $lightness: -10%) !default;
+$primaryTextColor: #ffffff !default;
+
+$highlightBg: #ced6f1 !default;
+$highlightTextColor: #585858 !default;
+
+$colors: (
+    "blue": #54A6D4,
+    "green": #8BAE2C,
+    "yellow": #FFD02A,
+    "cyan": #35A4CC,
+    "pink": #D45472,
+    "indigo": #5472D4,
+    "teal": #3FBFA0,
+    "orange": #FF922A,
+    "bluegray": #8191A6,
+    "purple": #7654D4,
+    "red": #FF5D44,
+    "primary": $primaryColor
+) !default;
+
+//reused color variables
+$shade000:#ffffff !default;    //surface
+$shade100:#f5f5f5 !default;    //header background
+$shade200:#edf0fA !default;    //hover background
+$shade300:#ebebeb !default;    //border, divider
+$shade400:#e1e1e1 !default;    //input border
+$shade500:#cecece !default;    //input hover border
+$shade600:#898989 !default;    //text secondary color
+$shade700:#6c6c6c !default;    //text color
+$shade800:#585858 !default;    //message text, highlight text
+$shade900:#3b3b3b !default;    //unused
+
+//global
+$fontFamily:Poppins, sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:6px !default;
+$transitionDuration:.3s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#f88c79 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLighterColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 .1rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:$shade200 !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:2px solid $shade400 !default;
+$inputHoverBorderColor:$shade500 !default;
+$inputFocusBorderColor:$primaryLightColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:#f2f2f2 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$inputFilledBg !default;
+
+//input groups
+$inputGroupBg:$shade100 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth:2.857rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem .5rem !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:6px !default;
+$inputListItemMargin:0 0 4px 0 !default;
+$inputListItemFocusShadow:inset 0 0 0 .15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1.5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade000 !default;
+$inputListHeaderTextColor:$shade700 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;                  
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//password
+$passwordMeterBg:$shade300 !default;
+$passwordWeakBg:#d45472 !default;
+$passwordMediumBg:#ff922a !default;
+$passwordStrongBg:#8bae2c !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.857rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:2px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:2px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#8191a6 !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 0.1rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#35a4cc !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.1rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#8bae2c !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.1rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#ff922a !default;
+$warningButtonTextColor:#ffffff !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.1rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#7654d4 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.1rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#d45472 !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.1rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.1rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade800 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:2px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade600 !default;
+$toggleButtonActiveBg:$highlightBg !default;
+$toggleButtonActiveBorderColor:$highlightBg !default;
+$toggleButtonTextActiveColor:$highlightTextColor !default;
+$toggleButtonIconActiveColor:$highlightTextColor !default;
+$toggleButtonActiveHoverBg:scale-color($highlightBg, $lightness: -5%) !default;
+$toggleButtonActiveHoverBorderColor:scale-color($highlightBg, $lightness: -5%) !default;
+$toggleButtonTextActiveHoverColor:$highlightTextColor !default;
+$toggleButtonIconActiveHoverColor:$highlightTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade700 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#dF7E6C !default;
+$ratingCancelIconHoverColor:#f88c79 !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade700 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade000 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade700 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade700 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:6px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:6px !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade500 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade500, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor:$shade300 !default;
+$panelHeaderBorder:2px solid $shade300 !default;
+$panelHeaderBg:$shade000 !default;
+$panelHeaderTextColor:$shade700 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade700 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:2px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentEvenRowBg:scale-color($panelContentBg, $lightness: -1%) !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:2px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade700 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade700 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade700 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$highlightBg !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:600 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade300 !default;
+$paginatorBorderWidth:2px !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade700 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:2px solid $shade100 !default;
+$tableHeaderBorderWidth:0 0 2px 0 !default;
+$tableHeaderBg:$shade000 !default;
+$tableHeaderTextColor:$shade700 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade000 !default;
+$tableHeaderCellTextColor:$shade700 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:2px solid $shade100 !default;
+$tableHeaderCellBorderWidth:0 0 2px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade700 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade000 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:2px solid $shade100 !default;
+$tableBodyCellBorderWidth:0 0 2px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade000 !default;
+$tableFooterCellTextColor:$shade700 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:2px solid $shade100 !default;
+$tableFooterCellBorderWidth:0 0 2px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+$tableDragHelperBg: rgba($primaryColor, .16) !default;
+
+$tableFooterBorder:2px solid $shade100 !default;
+$tableFooterBorderWidth:0 0 2px 0 !default;
+$tableFooterBg:$shade000 !default;
+$tableFooterTextColor:$shade700 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 2px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 2px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade100 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder:2px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade000 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:400 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:2px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:600 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#e1f2f7 !default;
+$infoMessageBorder:4px solid #83c7e0 !default;
+$infoMessageTextColor:$shade800 !default;
+$infoMessageIconColor:$shade800 !default;
+$successMessageBg:#f2f8e1 !default;
+$successMessageBorder:4px solid #c7e084 !default;
+$successMessageTextColor:$shade800 !default;
+$successMessageIconColor:$shade800 !default;
+$warningMessageBg:#ffecdb !default;
+$warningMessageBorder:4px solid #ffb065 !default;
+$warningMessageTextColor:$shade800 !default;
+$warningMessageIconColor:$shade800 !default;
+$errorMessageBg:#f7e1e6 !default;
+$errorMessageBorder:4px solid #de8499 !default;
+$errorMessageTextColor:$shade800 !default;
+$errorMessageIconColor:$shade800 !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade700 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem 1rem 1rem !default;
+
+//tooltip
+$tooltipBg:$shade800 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:2px solid $shade300 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:2px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:6px !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade700 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$shade700 !default;
+$menuitemIconActiveColor:$shade600 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade700 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.5rem .5rem !default;
+$verticalMenuitemMargin:0 0 4px 0 !default;
+$menuSeparatorMargin:4px 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade300 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade800 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade700};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --font-family:#{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #f1f3f5;
+    --surface-100: #e2e6eb;
+    --surface-200: #c6cdd7;
+    --surface-300: #a9b4c2;
+    --surface-400: #8d9bae;
+    --surface-500: #70829a;
+    --surface-600: #5a687b;
+    --surface-700: #434e5c;
+    --surface-800: #2d343e;
+    --surface-900: #161a1f;
+    --gray-50: #f1f3f5;
+    --gray-100: #e2e6eb;
+    --gray-200: #c6cdd7;
+    --gray-300: #a9b4c2;
+    --gray-400: #8d9bae;
+    --gray-500: #70829a;
+    --gray-600: #5a687b;
+    --gray-700: #434e5c;
+    --gray-800: #2d343e;
+    --gray-900: #161a1f;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#f5f5f5;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#ebebeb;
+    --surface-hover:#edf0fA;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
\ No newline at end of file
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff
new file mode 100644
index 0000000..263ae18
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2
new file mode 100644
index 0000000..5145c1e
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff
new file mode 100644
index 0000000..b33382e
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2
new file mode 100644
index 0000000..1f4ac79
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff
new file mode 100644
index 0000000..2647313
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..4340e26
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff
new file mode 100644
index 0000000..77049f3
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff differ
diff --git a/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..5643f91
Binary files /dev/null and b/themes/viva/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 differ
diff --git a/themes/viva/viva-light/theme.scss b/themes/viva/viva-light/theme.scss
new file mode 100644
index 0000000..1f44de2
--- /dev/null
+++ b/themes/viva/viva-light/theme.scss
@@ -0,0 +1,4 @@
+@import './_variables';
+@import './_fonts';
+@import '../../../designer/_components';
+@import './_extensions';