flexlayout-react 0.8.5 → 0.8.6

package/style/gray.scss

@@ -1,185 +1,6 @@
-$color_text: black !default;
-$color_background: white !default;
-$color_base: white !default;
-$color_1: scale_color($color_base, $lightness: -3%) !default;
-$color_2: scale_color($color_base, $lightness: -10%) !default;
-$color_3: scale_color($color_base, $lightness: -15%) !default;
-$color_4: scale_color($color_base, $lightness: -20%) !default;
-$color_5: scale_color($color_base, $lightness: -25%) !default;
-$color_6: scale_color($color_base, $lightness: -30%) !default;
-$color_drag1: rgb(95, 134, 196) !default;
-$color_drag2: rgb(119, 166, 119) !default;
-$color_drag1_background: rgba(95, 134, 196, 0.1) !default;
-$color_drag2_background: rgba(119, 166, 119, 0.075) !default;
-$font_size: medium !default;
-$font_family: Roboto, Arial, sans-serif !default;
+@use "base";
+@use "themes";
 
-.flexlayout {
-    &__layout {
-        --color-text: #{$color_text};
-        --color-background: #{$color_background};
-        --color-base: #{$color_base};
-        --color-1: #{$color_1};
-        --color-2: #{$color_2};
-        --color-3: #{$color_3};
-        --color-4: #{$color_4};
-        --color-5: #{$color_5};
-        --color-6: #{$color_6};
-        --color-drag1: #{$color_drag1};
-        --color-drag2: #{$color_drag2};
-        --color-drag1-background: #{$color_drag1_background};
-        --color-drag2-background: #{$color_drag2_background};
-
-        --font-size: #{$font_size};
-        --font-family: #{$font_family};
-
-        --color-overflow: gray;
-        --color-icon: gray;
-
-        --color-tabset-background: var(--color-1);
-        --color-tabset-background-selected: var(--color-1);
-        --color-tabset-background-maximized: var(--color-6);
-        --color-tabset-divider-line: var(--color-3);
-
-        --color-tabset-header-background: var(--color-1);
-        --color-tabset-header: var(--color-text);
-
-        --color-border-tab-content: var(--color-background);
-        --color-border-background: var(--color-1);
-        --color-border-divider-line: var(--color-3);
-
-        --color-tab-content: var(--color-background);
-        --color-tab-selected: var(--color-text);
-        --color-tab-selected-background: var(--color-3);
-        --color-tab-unselected: gray;
-        --color-tab-unselected-background: transparent;
-        --color-tab-textbox: var(--color-text);
-        --color-tab-textbox-background: var(--color-3);
-
-        --color-border-tab-selected: var(--color-text);
-        --color-border-tab-selected-background: var(--color-3);
-        --color-border-tab-unselected: gray;
-        --color-border-tab-unselected-background: var(--color-2);
-
-        --color-splitter: var(--color-2);
-        --color-splitter-hover: var(--color-4);
-        --color-splitter-drag: var(--color-5);
-
-        --color-drag-rect-border: var(--color-4);
-        --color-drag-rect-background: var(--color-3);
-        --color-drag-rect: var(--color-text);
-
-        --color-popup-border: var(--color-6);
-        --color-popup-unselected: var(--color-text);
-        --color-popup-unselected-background: #{$color_background};
-        --color-popup-selected: var(--color-text);
-        --color-popup-selected-background: var(--color-3);
-
-        --color-edge-marker: #aaa;
-        --color-edge-icon: #555;
-
-        --color-mini-scroll-indicator:rgba(128, 128, 128, 0.5);
-        --color-mini-scroll-indicator-hovered:rgba(128, 128, 128, 0.7);
-        --size-mini-scroll-indicator:3px;
-    }
-}
-
-
-@mixin tabset_mixin {
-}
-
-@mixin tabset_tabbar_mixin {
-}
-
-@mixin tabset_header_mixin {
-}
-
-@mixin tabset_selected_mixin {
-    background-image: linear-gradient(var(--color-background),var(--color-4));
-}
-
-@mixin tabset_header_mixin {
-    box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
-}
-
-@mixin tabset_selected_mixin {
-    background-image: linear-gradient(var(--color-background),var(--color-3));
-}
-
-@mixin tabset_maximized_mixin {
-    background-image: linear-gradient(var(--color-3),var(--color-1));
-}
-
-@mixin tab_top_mixin {
-    box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-}
-
-@mixin tab_bottom_mixin {
-    box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-
-@mixin tab_button_mixin {
-}
-
-@mixin tab_button_selected_mixin {
-}
-
-@mixin tab_button_unselected_mixin {
-}
-
-@mixin tab_button_hovered_mixin {
-}
-
-@mixin close_button_hovered_mixin {
-}
-
-@mixin toolbar_button_hovered_mixin {
-}
-
-@mixin border_mixin {
-}
-
-@mixin border_button_mixin {
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
-    border-radius: 3px;
-}
-
-@mixin border_button_selected_mixin {
-}
-
-@mixin border_button_unselected_mixin {
-}
-
-@mixin border_button_hovered_mixin {
-}
-
-@mixin tab_button_stretch_mixin {
-}
-
-@mixin tab_button_stretch_hovered_mixin {
-}
-
-@mixin splitter_mixin {
-}
-
-@mixin splitter_hover_mixin {
-}
-
-@mixin splitter_drag_mixin {
-    border-radius: 5px;
-}
-
-@mixin splitter_border_mixin {
-}
-
-@mixin tabset_tab_divider_mixin {
-}
-
-@mixin border_tab_divider_mixin {
-}
-
-@import "_base";
+@include themes.gray_theme;
+@include base.baseMixin;
+@include themes.gray_theme_overrides;

package/style/light.css

@@ -3,11 +3,11 @@
   --color-background: white;
   --color-base: white;
   --color-1: rgb(247.35, 247.35, 247.35);
-  --color-2: rgb(239.9295, 239.9295, 239.9295);
-  --color-3: rgb(232.731615, 232.731615, 232.731615);
-  --color-4: rgb(225.74966655, 225.74966655, 225.74966655);
-  --color-5: rgb(218.9771765535, 218.9771765535, 218.9771765535);
-  --color-6: rgb(212.4078612569, 212.4078612569, 212.4078612569);
+  --color-2: rgb(239.7, 239.7, 239.7);
+  --color-3: rgb(232.05, 232.05, 232.05);
+  --color-4: rgb(224.4, 224.4, 224.4);
+  --color-5: rgb(216.75, 216.75, 216.75);
+  --color-6: rgb(209.1, 209.1, 209.1);
   --color-drag1: rgb(95, 134, 196);
   --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
@@ -49,11 +49,15 @@
   --color-popup-selected-background: var(--color-3);
   --color-edge-marker: #aaa;
   --color-edge-icon: #555;
-  --color-mini-scroll-indicator:rgba(128, 128, 128, 0.5);
-  --color-mini-scroll-indicator-hovered:rgba(128, 128, 128, 0.7);
-  --size-mini-scroll-indicator:3px;
+  --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
+  --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
+  --size-mini-scroll-indicator: 3px;
+  --color-toolbar-button-hover: var(--color-3);
 }
 
+/*
+    base classes
+*/
 .flexlayout__layout {
   left: 0;
   top: 0;
@@ -61,6 +65,7 @@
   bottom: 0;
   position: absolute;
   display: flex;
+  background-color: var(--color-background);
 }
 .flexlayout__layout_overlay {
   left: 0;
@@ -128,6 +133,7 @@
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  border-radius: 5px;
   background-color: var(--color-splitter-drag);
 }
 .flexlayout__splitter_handle {
@@ -353,7 +359,6 @@
 .flexlayout__tab_button--unselected {
   background-color: var(--color-tab-unselected-background);
   color: var(--color-tab-unselected);
-  color: gray;
 }
 .flexlayout__tab_button_leading {
   display: flex;
@@ -381,7 +386,7 @@
   border-radius: 4px;
 }
 .flexlayout__tab_button_trailing:hover {
-  background-color: var(--color-3);
+  background-color: var(--color-toolbar-button-hover);
 }
 @media (hover: hover) {
   .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
@@ -427,7 +432,7 @@
 }
 @media (hover: hover) {
   .flexlayout__tab_toolbar_button:hover {
-    background-color: var(--color-2);
+    background-color: var(--color-toolbar-button-hover);
   }
 }
 .flexlayout__tab_toolbar_sticky_buttons_container {
@@ -436,30 +441,6 @@
   padding-left: 5px;
   align-items: center;
 }
-.flexlayout__tab_floating {
-  overflow: auto;
-  position: absolute;
-  box-sizing: border-box;
-  color: var(--color-text);
-  background-color: var(--color-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.flexlayout__tab_floating_inner {
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.flexlayout__tab_floating_inner div {
-  margin-bottom: 5px;
-  text-align: center;
-}
-.flexlayout__tab_floating_inner div a {
-  color: royalblue;
-}
 .flexlayout__border {
   box-sizing: border-box;
   overflow: hidden;
@@ -539,7 +520,6 @@
 }
 @media (hover: hover) {
   .flexlayout__border_button:hover {
-    background-color: var(--color-border-tab-selected-background);
     color: var(--color-border-tab-selected);
   }
 }
@@ -558,9 +538,6 @@
   border-radius: 4px;
   visibility: hidden;
 }
-.flexlayout__border_button_trailing:hover {
-  background-color: var(--color-3);
-}
 @media (hover: hover) {
   .flexlayout__border_button:hover .flexlayout__border_button_trailing {
     visibility: visible;
@@ -593,7 +570,7 @@
 }
 @media (hover: hover) {
   .flexlayout__border_toolbar_button:hover {
-    background-color: var(--color-2);
+    background-color: var(--color-toolbar-button-hover);
   }
 }
 .flexlayout__border_toolbar_button_overflow {
@@ -661,18 +638,6 @@
   display: flex;
   align-items: center;
 }
-.flexlayout__tabset_sizer {
-  padding-top: 5px;
-  padding-bottom: 3px;
-  font-size: var(--font-size);
-  font-family: var(--font-family);
-}
-.flexlayout__tabset_header_sizer {
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: var(--font-size);
-  font-family: var(--font-family);
-}
 .flexlayout__border_sizer {
   position: absolute;
   top: -30000px;
@@ -708,4 +673,9 @@
   }
 }
 
+/* ======================== End of Base Classes =========================== */
+/* 
+    light theme overrides 
+*/
+
 /*# sourceMappingURL=light.css.map */

package/style/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["light.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;;ACnEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;;AAIJ;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;;AAGJ;EACI;IACI;;;AAKR;EACI;EACA;ED3OZ;;ACuPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDtQZ;;AC8QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDzThB;;;AC2UQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDzeZ;;ACifQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDlhBhB;;;AC0hBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7tBJ;EACA;EACA;EACA;EACA;;AA8tBA;EAluBA;EACA;EACA;EACA;EACA;EAguBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;IACI;IACA","file":"light.css"}
+{"version":3,"sourceRoot":"","sources":["_themes.scss","_base.scss"],"names":[],"mappings":"AAqBQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;;;ACxER;AAAA;AAAA;AAII;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;EACA;;AAEA;EAxBR;EACA;EACA;EACA;EACA;EAsBY;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAtCR;EACA;EACA;EACA;EAqCY;EACA;;AAIR;EA7CJ;EACA;EACA;EACA;EA4CQ;;AAGJ;EAlDJ;EACA;EACA;EACA;EAiDQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAxJJ;EACA;EACA;EACA;EAuJQ;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAzKR;EACA;EACA;EACA;EAwKY;EACA;EACA;;AAGJ;EACI;;AAGJ;EApLR;EACA;EACA;EACA;EAmLY;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAMhB;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;IACI;;;AAKZ;EACI;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;;AASJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAQR;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;IACI;;;AAaZ;EACI;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;IAEI;;;AAIR;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAUJ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;IACI;;;AAMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAYhB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArrBR;EACA;EACA;EACA;EACA;;AAsrBI;EA1rBJ;EACA;EACA;EACA;EACA;EAwrBQ;EACA;;AAGJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;IACI;IACA;;;;AAMpB;ADppBA;AAAA;AAAA","file":"light.css"}

package/style/light.scss

@@ -1,169 +1,7 @@
-$color_text: black !default;
-$color_background: white !default;
-$color_base: white !default;
-$color_1: scale_color($color_base, $lightness: -3%) !default;
-$color_2: scale_color($color_1, $lightness: -3%) !default;
-$color_3: scale_color($color_2, $lightness: -3%) !default;
-$color_4: scale_color($color_3, $lightness: -3%) !default;
-$color_5: scale_color($color_4, $lightness: -3%) !default;
-$color_6: scale_color($color_5, $lightness: -3%) !default;
-$color_drag1: rgb(95, 134, 196) !default;
-$color_drag2: rgb(119, 166, 119) !default;
-$color_drag1_background: rgba(95, 134, 196, 0.1) !default;
-$color_drag2_background: rgba(119, 166, 119, 0.075) !default;
+@use "base";
+@use "themes";
 
-$font-size: medium !default;
-$font-family: Roboto, Arial, sans-serif !default;
+@include themes.light_theme;
+@include base.baseMixin;
+@include themes.light_theme_overrides;
 
-.flexlayout {
-    &__layout {
-        --color-text: #{$color_text};
-        --color-background: #{$color_background};
-        --color-base: #{$color_base};
-        --color-1: #{$color_1};
-        --color-2: #{$color_2};
-        --color-3: #{$color_3};
-        --color-4: #{$color_4};
-        --color-5: #{$color_5};
-        --color-6: #{$color_6};
-        --color-drag1: #{$color_drag1};
-        --color-drag2: #{$color_drag2};
-        --color-drag1-background: #{$color_drag1_background};
-        --color-drag2-background: #{$color_drag2_background};
-
-        --font-size: #{$font_size};
-        --font-family: #{$font_family};
-
-        --color-overflow: gray;
-        --color-icon: gray;
-
-        --color-tabset-background: var(--color-background);
-        --color-tabset-background-selected: var(--color-1);
-        --color-tabset-background-maximized: var(--color-2);
-        --color-tabset-divider-line: var(--color-4);
-
-        --color-tabset-header-background: var(--color-background);
-        --color-tabset-header: var(--color-text);
-
-        --color-border-tab-content: var(--color-background);
-        --color-border-background: var(--color-background);
-        --color-border-divider-line: var(--color-4);
-
-        --color-tab-content: var(--color-background);
-        --color-tab-selected: var(--color-text);
-        --color-tab-selected-background: var(--color-4);
-        --color-tab-unselected: gray;
-        --color-tab-unselected-background: transparent;
-        --color-tab-textbox: var(--color-text);
-        --color-tab-textbox-background: var(--color-3);
-
-        --color-border-tab-selected: var(--color-text);
-        --color-border-tab-selected-background: var(--color-4);
-        --color-border-tab-unselected: gray;
-        --color-border-tab-unselected-background: var(--color-2);
-
-        --color-splitter: var(--color-1);
-        --color-splitter-hover: var(--color-4);
-        --color-splitter-drag: var(--color-4);
-
-        --color-drag-rect-border: #ccc;
-        --color-drag-rect-background: var(--color-5);
-        --color-drag-rect: var(--color-text);
-
-        --color-popup-border: var(--color-6);
-        --color-popup-unselected: var(--color-text);
-        --color-popup-unselected-background: #{$color_background};
-        --color-popup-selected: var(--color-text);
-        --color-popup-selected-background: var(--color-3);
-
-        --color-edge-marker: #aaa;
-        --color-edge-icon: #555;
-
-        --color-mini-scroll-indicator:rgba(128, 128, 128, 0.5);
-        --color-mini-scroll-indicator-hovered:rgba(128, 128, 128, 0.7);
-        --size-mini-scroll-indicator:3px;
-    }
-}
-
-@mixin tabset_mixin {
-}
-
-@mixin tabset_tabbar_mixin {
-}
-
-@mixin tabset_header_mixin {
-}
-
-@mixin tabset_selected_mixin {
-}
-
-@mixin tabset_maximized_mixin {
-}
-
-@mixin tab_top_mixin {
-}
-
-@mixin tab_bottom_mixin {
-}
-
-@mixin tab_button_mixin {
-}
-
-@mixin tab_button_selected_mixin {
-}
-
-@mixin tab_button_unselected_mixin {
-    color: gray;
-}
-
-@mixin tab_button_hovered_mixin {
-}
-
-@mixin tab_button_stretch_mixin {
-}
-
-@mixin tab_button_stretch_hovered_mixin {
-}
-
-@mixin close_button_hovered_mixin {
-    background-color:var(--color-3);
-}
-
-@mixin toolbar_button_hovered_mixin {
-    background-color:var(--color-2);
-}
-
-@mixin border_mixin {
-}
-
-@mixin border_button_mixin {
-}
-
-@mixin border_button_selected_mixin {
-}
-
-@mixin border_button_unselected_mixin {
-}
-
-@mixin border_button_hovered_mixin {
-}
-
-@mixin splitter_mixin {
-}
-
-@mixin splitter_hover_mixin {
-}
-
-@mixin splitter_drag_mixin {
-}
-
-@mixin splitter_border_mixin {
-}
-
-@mixin tabset_tab_divider_mixin {
-}
-
-@mixin border_tab_divider_mixin {
-}
-
-@import "_base";