flexlayout-react 0.8.5 → 0.8.7

package/style/underline.css

@@ -3,11 +3,11 @@
   --color-background: white;
   --color-base: white;
   --color-1: rgb(249.9, 249.9, 249.9);
-  --color-2: rgb(244.902, 244.902, 244.902);
-  --color-3: rgb(237.55494, 237.55494, 237.55494);
-  --color-4: rgb(230.4282918, 230.4282918, 230.4282918);
-  --color-5: rgb(223.515443046, 223.515443046, 223.515443046);
-  --color-6: rgb(216.8099797546, 216.8099797546, 216.8099797546);
+  --color-2: rgb(244.8, 244.8, 244.8);
+  --color-3: rgb(237.15, 237.15, 237.15);
+  --color-4: rgb(229.5, 229.5, 229.5);
+  --color-5: rgb(221.85, 221.85, 221.85);
+  --color-6: rgb(214.2, 214.2, 214.2);
   --color-drag1: rgb(95, 134, 196);
   --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
@@ -52,11 +52,15 @@
   --color-underline: rgb(65, 105, 225);
   --color-underline-hover: #aaa;
   --underline_height: 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:4px;
+  --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: 4px;
+  --color-toolbar-button-hover: var(--color-3);
 }
 
+/*
+    base classes
+*/
 .flexlayout__layout {
   left: 0;
   top: 0;
@@ -64,6 +68,7 @@
   bottom: 0;
   position: absolute;
   display: flex;
+  background-color: var(--color-background);
 }
 .flexlayout__layout_overlay {
   left: 0;
@@ -123,6 +128,7 @@
     background-color: var(--color-splitter-hover);
     transition: background-color ease-in 0.1s;
     transition-delay: 0.05s;
+    border-radius: 5px;
   }
 }
 .flexlayout__splitter_drag {
@@ -131,6 +137,7 @@
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  border-radius: 5px;
   background-color: var(--color-splitter-drag);
 }
 .flexlayout__splitter_handle {
@@ -220,9 +227,6 @@
 }
 .flexlayout__tabset_tab_divider {
   width: 4px;
-  width: 1px;
-  margin: 4px 6px 4px 6px;
-  border-left: 1px solid #ddd;
 }
 .flexlayout__tabset_content {
   display: flex;
@@ -329,7 +333,6 @@
   box-sizing: border-box;
   padding: 3px 0.5em;
   cursor: pointer;
-  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 .flexlayout__tab_button_stretch {
   background-color: transparent;
@@ -351,7 +354,6 @@
 .flexlayout__tab_button--selected {
   background-color: var(--color-tab-selected-background);
   color: var(--color-tab-selected);
-  border-bottom: var(--underline_height) solid var(--color-underline);
 }
 @media (hover: hover) {
   .flexlayout__tab_button:hover {
@@ -361,8 +363,6 @@
 .flexlayout__tab_button--unselected {
   background-color: var(--color-tab-unselected-background);
   color: var(--color-tab-unselected);
-  color: gray;
-  border-bottom: var(--underline_height) solid transparent;
 }
 .flexlayout__tab_button_leading {
   display: flex;
@@ -390,7 +390,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 {
@@ -436,7 +436,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 {
@@ -445,30 +445,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;
@@ -531,9 +507,6 @@
 }
 .flexlayout__border_tab_divider {
   width: 4px;
-  width: 1px;
-  margin: 4px 6px 4px 6px;
-  border-left: 1px solid #ddd;
 }
 .flexlayout__border_button {
   display: flex;
@@ -544,24 +517,19 @@
   margin: 2px 0px;
   box-sizing: border-box;
   white-space: nowrap;
-  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 .flexlayout__border_button--selected {
   background-color: var(--color-border-tab-selected-background);
   color: var(--color-border-tab-selected);
-  border-bottom: var(--underline_height) solid var(--color-underline);
 }
 @media (hover: hover) {
   .flexlayout__border_button:hover {
-    background-color: var(--color-border-tab-selected-background);
     color: var(--color-border-tab-selected);
-    border-bottom: var(--underline_height) solid var(--color-underline-hover);
   }
 }
 .flexlayout__border_button--unselected {
   background-color: var(--color-border-tab-unselected-background);
   color: var(--color-border-tab-unselected);
-  border-bottom: var(--underline_height) solid transparent;
 }
 .flexlayout__border_button_leading {
   display: flex;
@@ -574,9 +542,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;
@@ -609,7 +574,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 {
@@ -677,18 +642,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;
@@ -724,6 +677,33 @@
   }
 }
 
+/* ======================== End of Base Classes =========================== */
+/* 
+    underline theme overrides 
+*/
+.flexlayout__tab_button {
+  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
+}
+.flexlayout__tab_button--selected {
+  border-bottom: var(--underline_height) solid var(--color-underline);
+}
+.flexlayout__tab_button--unselected {
+  border-bottom: var(--underline_height) solid transparent;
+}
+.flexlayout__border_button {
+  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
+}
+.flexlayout__border_button--selected {
+  border-bottom: var(--underline_height) solid var(--color-underline);
+}
+.flexlayout__border_button--unselected {
+  border-bottom: var(--underline_height) solid transparent;
+}
+.flexlayout__tabset_tab_divider, .flexlayout__border_tab_divider {
+  width: 1px;
+  margin: 4px 6px 4px 6px;
+  border-left: 1px solid #ddd;
+}
 .flexlayout__tab_button_textbox {
   border: none;
 }

package/style/underline.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["underline.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;EAEA;EACA;EACA;;;ACvEJ;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;EDNR;EACA;EACA;;ACQI;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;EDvMR;;AC0MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED7NZ;;ACgOQ;EACI;IACI;;;AAKR;EACI;EACA;EDrOZ;EACA;;ACgPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDpQZ;;AC4QQ;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;IDvThB;;;ACyUQ;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;EDtYR;EACA;EACA;;ACwYI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDpbR;;ACubQ;EACI;EACA;EDrbZ;;ACwbQ;EACI;IACI;IACA;IDnbhB;;;ACwbQ;EACI;EACA;ED9bZ;;ACkcQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDveZ;;AC+eQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDhhBhB;;;ACwhBY;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;;;;ADrmBhB;EACI","file":"underline.css"}
+{"version":3,"sourceRoot":"","sources":["_themes.scss","_base.scss"],"names":[],"mappings":"AAwXQ;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;EACA;EACA;EAEA;;;AC/aR;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;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;EAzJJ;EACA;EACA;EACA;EAwJQ;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA1KR;EACA;EACA;EACA;EAyKY;EACA;EACA;;AAGJ;EACI;;AAGJ;EArLR;EACA;EACA;EACA;EAoLY;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;EAtrBR;EACA;EACA;EACA;EACA;;AAurBI;EA3rBJ;EACA;EACA;EACA;EACA;EAyrBQ;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;AD9SA;AAAA;AAAA;AAKQ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;;AAGJ;EACI","file":"underline.css"}

package/style/underline.scss

@@ -1,191 +1,6 @@
-$color_text: black !default;
-$color_background: white !default;
-$color_base: white !default;
-$color_1: scale_color($color_base, $lightness: -2%) !default;
-$color_2: scale_color($color_1, $lightness: -2%) !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;
-
-.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-6);
-        --color-tabset-divider-line: var(--color-3);
-
-        --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-3);
-
-        --color-tab-content: var(--color-background);
-        --color-tab-selected: var(--color-text);
-        --color-tab-selected-background: transparent;
-        --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: transparent;
-        --color-border-tab-unselected: gray;
-        --color-border-tab-unselected-background: transparent;
-
-        --color-splitter: var(--color-1);
-        --color-splitter-hover: var(--color-4);
-        --color-splitter-drag: var(--color-4);
-
-        --color-drag-rect-border: var(--color-6);
-        --color-drag-rect-background: var(--color-4);
-        --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-underline: rgb(65, 105, 225);
-        --color-underline-hover: #aaa;
-        --underline_height: 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:4px;
-    }
-}
-
-@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 {
-    padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
-}
-
-@mixin tab_button_selected_mixin {
-    border-bottom: var(--underline_height) solid  var(--color-underline);
-}
-
-@mixin tab_button_unselected_mixin {
-    color: gray;
-    border-bottom: var(--underline_height) solid transparent;
-}
-
-@mixin tab_button_hovered_mixin {
-    // border-bottom: var(--underline_height) solid  var(--color-underline-hover);
-}
-
-@mixin close_button_hovered_mixin {
-    background-color:var(--color-3);
-}
-
-@mixin toolbar_button_hovered_mixin {
-    background-color:var(--color-2);
-}
-
-@mixin tab_button_stretch_mixin {
-}
-
-@mixin tab_button_stretch_hovered_mixin {
-}
-
-@mixin border_mixin {
-}
-
-@mixin border_button_mixin {
-    padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
-}
-
-@mixin border_button_selected_mixin {
-    border-bottom: var(--underline_height) solid  var(--color-underline);
-}
-
-@mixin border_button_unselected_mixin {
-    border-bottom: var(--underline_height) solid transparent;
-    }
-
-@mixin border_button_hovered_mixin {
-    border-bottom: var(--underline_height) solid  var(--color-underline-hover);
-}
-
-@mixin splitter_mixin {
-}
-
-@mixin splitter_hover_mixin {
-}
-
-@mixin splitter_drag_mixin {
-}
-
-@mixin splitter_border_mixin {
-}
-
-@mixin tabset_tab_divider_mixin {
-    width: 1px;
-    margin: 4px 6px 4px 6px;
-    border-left: 1px solid #ddd;
-}
-
-@mixin border_tab_divider_mixin {
-    width: 1px;
-    margin: 4px 6px 4px 6px;
-    border-left: 1px solid #ddd;
-}
-
-@import "_base";
-
-.flexlayout__tab_button_textbox {
-    border:none;
-}
+@include themes.underline_theme;
+@include base.baseMixin;
+@include themes.underline_theme_overrides;

package/.editorconfig

@@ -1,8 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = true

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,104 +0,0 @@
-name: '🐛 Bug report'
-description: Create a report to help us improve
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thank you for reporting an issue :pray:.
-
-        This issue tracker is for reporting bugs found in `FlexLayout` (https://github.com/caplin/FlexLayout).
-        If you have a question about how to achieve something and are struggling, please post a question
-        inside of `FlexLayout` Discussions tab: https://github.com/caplin/FlexLayout/discussions
-
-        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-         - `FlexLayout` Issues tab: https://github.com/caplin/FlexLayout/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
-         - `FlexLayout` closed issues tab: https://github.com/caplin/FlexLayout/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed
-         - `FlexLayout` Discussions tab: https://github.com/caplin/FlexLayout/discussions
-
-        The more information you fill in, the better the community can help you.
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug
-      description: Provide a clear and concise description of the challenge you are running into.
-    validations:
-      required: true
-  - type: input
-    id: link
-    attributes:
-      label: Your Example Website or App
-      description: |
-        Which website or app were you using when the bug happened?
-        Note:
-        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `FlexLayout` npm package.
-        - To create a shareable code example you can use Stackblitz (https://stackblitz.com/). Please no localhost URLs.
-        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
-      placeholder: |
-        e.g. https://stackblitz.com/edit/...... OR Github Repo
-    validations:
-      required: false
-  - type: textarea
-    id: steps
-    attributes:
-      label: Steps to Reproduce the Bug or Issue
-      description: Describe the steps we have to take to reproduce the behavior.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '....'
-        3. Scroll down to '....'
-        4. See error
-    validations:
-      required: true
-  - type: textarea
-    id: expected
-    attributes:
-      label: Expected behavior
-      description: Provide a clear and concise description of what you expected to happen.
-      placeholder: |
-        As a user, I expected ___ behavior, but I am seeing ___
-    validations:
-      required: true
-  - type: input
-    id: os
-    attributes:
-      label: Operating System
-      description: What opearting system are you using?
-      placeholder: |
-        - OS: [e.g. macOS, Windows, Linux]
-    validations:
-      required: true
-  - type: input
-    id: browsers
-    attributes:
-      label: Browser Type?
-      description: What browsers are you seeing the problem on?
-      placeholder: |
-        - OS: [e.g. Google Chrome, Safari, Firefox, Opera etc]
-    validations:
-      required: true
-  - type: input
-    id: browser_version
-    attributes:
-      label: Browser Version
-      description: What browser version are you using?
-      placeholder: |
-        - Version: [e.g. 91.1]
-    validations:
-      required: true
-  - type: textarea
-    id: screenshots_or_videos
-    attributes:
-      label: Screenshots or Videos
-      description: |
-        If applicable, add screenshots or a video to help explain your problem.
-        For more information on the supported file image/file types and the file size limits, please refer
-        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓
-    validations:
-      required: true
-  - type: textarea
-    id: additional
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: true
-contact_links:
-  - name: 🤔 Feature Requests & Questions
-    url: https://github.com/caplin/FlexLayout/discussions
-    about: Please ask and answer questions here.

package/.prettierrc.json

@@ -1,3 +0,0 @@
-{
-    "printWidth": 200
-}