@dashadmin/dash-styles 1.3.17 → 1.3.19

package/dist/styles/toolbar.less

@@ -0,0 +1,90 @@
+.toolbar-filters > div {
+  display: flex;
+}
+
+.toolbar-settings {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
+
+.toolbar-buttons {
+    align-items: center;
+}
+
+/*
+.toolbar-collapse-button {
+    right: 10px;
+    bottom: 10px;
+}
+*/
+/*
+.toolbar-settings-button {
+    right: 10px;
+    top: 10px;
+}
+*/
+.toolbar-right-buttons {
+            position: absolute;
+            top: 0;
+            right: 2px;
+            display: flex;
+            z-index: 5;
+           
+}
+
+
+
+.toolbar-filters {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    /*> .MuiBox-root {
+        display: flex;
+        align-items: end;
+    }
+    &-filter-button {
+        position: absolute;
+        right: 36px;
+        top: -10px;
+    }*/
+}
+
+/*
+.top-toolbar, .top-toolbar-default {
+   // background: var(--module-bg);
+   // border-radius: 12px;
+  // padding: 15px;
+   box-shadow: none;
+   padding: 0 0 0 8px;
+}
+.top-toolbar > .MuiToolbar-root {
+    box-shadow: unset !important;
+    padding: 1rem !important;
+    position: relative;
+}
+*/
+
+//.top-toolbar-default {
+ //padding: 5px;
+ //padding-top:15px;;
+ //background: var(--module-bg);
+ //border-radius: 12px;
+ //margin-bottom:3px;
+//}
+
+/*
+
+.MuiToolbar-root-RaTopToolbar-root{
+    min-height: unset !important;
+}
+
+.MuiToolbar-root.MuiToolbar-gutters.MuiToolbar-regular{
+    display: flex;
+    align-items: center;
+    > *{
+        margin: 0;
+    }
+}
+*/

package/dist/styles/transition.less

@@ -0,0 +1,226 @@
+.transition-container {
+  transition: opacity 500ms ease-in-out;
+}
+
+.transition-container.transitioning {
+  opacity: 0.5;
+}
+
+.motion-wrapper-bg {
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.spinner-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 100;
+  transition: opacity 500ms ease-in-out;
+}
+
+/* Add this to your global CSS or styled component */
+.react-beautiful-dnd-dragging {
+  /* Prevent horizontal scrolling during drag */
+  overflow-x: hidden !important;
+}
+
+/* Ensure the drag preview doesn't cause layout issues */
+[data-rbd-drag-handle-draggable-id] {
+  transition: transform 0.2s ease !important;
+}
+
+/* Style the placeholder to maintain proper spacing */
+[data-rbd-placeholder-context-id] {
+  transition: height 0.2s ease !important;
+}
+
+.spinner-in {
+  opacity: 1;
+}
+
+.spinner-out {
+  opacity: 0;
+}
+
+.slide-in {
+    //z-index: 3000;
+    position: fixed;
+    top: calc(50% - 40px) !important;
+    left: calc(50% - 40px)  !important;
+    //transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    background-color: var(--primary-color);
+    padding: 10px;
+    box-sizing: border-box;
+    transform-origin: center;
+    border-radius: 50%;
+
+}
+
+.slide-out {
+  //z-index: 3000;
+  position: fixed;
+  top: calc(50% - 40px)  !important;
+  left: calc(50% - 40px)  !important;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  background-color: var(--primary-color);
+  padding: 10px;
+  box-sizing: border-box;
+  transform-origin: center;
+  border-radius: 50%;
+
+}
+
+.fade-in {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  background-color: var(--primary-color);
+  padding: 10px;
+  box-sizing: border-box;
+  transform-origin: center;
+  border-radius: 50%;
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fade-out {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  background-color: var(--primary-color);
+  padding: 10px;
+  box-sizing: border-box;
+  transform-origin: center;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+
+
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  z-index: 200;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 32px;
+    height: 32px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwNDlweCIgaGVpZ2h0PSIyMDQ5cHgiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uOyB0ZXh0LXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IGltYWdlLXJlbmRlcmluZzpvcHRpbWl6ZVF1YWxpdHk7IGZpbGwtcnVsZTpldmVub2RkOyBjbGlwLXJ1bGU6ZXZlbm9kZCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgoKPGc+PHBhdGggc3R5bGU9Im9wYWNpdHk6MSIgZmlsbD0iI0ZGRkZGRiIgZD0iTSAxNDczLjUsMTU4Ni41IEMgMTQ5OS42NiwxNTg3LjUgMTUyNS45OSwxNTg3LjgzIDE1NTIuNSwxNTg3LjVDIDE1NTIuNSwxNjQyLjE3IDE1NTIuNSwxNjk2LjgzIDE1NTIuNSwxNzUxLjVDIDE1MTQuNSwxNzUxLjUgMTQ3Ni41LDE3NTEuNSAxNDM4LjUsMTc1MS41QyAxMzk4LjAzLDE3NTEuMDkgMTM1OS42OSwxNzQxLjkyIDEzMjMuNSwxNzI0QyAxMjgzLjIyLDE3MDIuNzEgMTI1Ni4zOSwxNjcwLjIxIDEyNDMsMTYyNi41QyAxMjM2LjI5LDE2MDMuMyAxMjMyLjI5LDE1NzkuNjQgMTIzMSwxNTU1LjVDIDEyMzAuNSwxNDYzLjE3IDEyMzAuMzMsMTM3MC44MyAxMjMwLjUsMTI3OC41QyAxMjA0LjUsMTI3OC41IDExNzguNSwxMjc4LjUgMTE1Mi41LDEyNzguNUMgMTE1Mi42NywxMjQ0LjUgMTE1Mi41LDEyMTAuNSAxMTUyLDExNzYuNUMgMTA4MC4zMSwxMjYyLjY5IDEwMDguODEsMTM0OS4wMiA5MzcuNSwxNDM1LjVDIDEwMjUuNjEsMTU0MC43NiAxMTEzLjk1LDE2NDUuNzYgMTIwMi41LDE3NTAuNUMgMTEyMi42NywxNzUxLjUgMTA0Mi42NywxNzUxLjgzIDk2Mi41LDE3NTEuNUMgODk4LjAyMSwxNjYzLjIzIDgzMy41MjEsMTU3NC45IDc2OSwxNDg2LjVDIDc2OC41LDE1NzQuODMgNzY4LjMzMywxNjYzLjE3IDc2OC41LDE3NTEuNUMgNzAzLjgzMywxNzUxLjUgNjM5LjE2NywxNzUxLjUgNTc0LjUsMTc1MS41QyA1NzQuODMzLDE0OTYuODMgNTc0LjUsMTI0Mi4xNyA1NzMuNSw5ODcuNUMgNTE3LjA2Miw5NjkuNTYyIDQ4MC4yMjksOTMyLjIyOSA0NjMsODc1LjVDIDQ2MC41NzUsODY0LjYxNSA0NTguOTA4LDg1My42MTUgNDU4LDg0Mi41QyA0NTcuMzMzLDY2Mi41IDQ1Ny4zMzMsNDgyLjUgNDU4LDMwMi41QyA0NjguMjA1LDI3Mi4wODkgNDg4LjcwNSwyNjEuNTg5IDUxOS41LDI3MUMgNTMyLjU0MiwyNzcuNzA5IDU0MC43MDksMjg4LjIwOSA1NDQsMzAyLjVDIDU0NC4zMzMsNDQyLjE2NyA1NDQuNjY3LDU4MS44MzMgNTQ1LDcyMS41QyA1NDkuMzA3LDczMS4zNjEgNTU2LjQ3NCw3MzQuMTk1IDU2Ni41LDczMEMgNTY5LjQ2Miw3MjcuNzEzIDU3MS42MjksNzI0Ljg4IDU3Myw3MjEuNUMgNTczLjMzMyw1ODIuMTY3IDU3My42NjcsNDQyLjgzMyA1NzQsMzAzLjVDIDU4Mi4wODcsMjc1LjM2OSA2MDAuNTg3LDI2My44NjkgNjI5LjUsMjY5QyA2NDUuODQ4LDI3NC4wMTUgNjU2LjAxNSwyODQuODQ4IDY2MCwzMDEuNUMgNjYwLjMzMyw0NDEuMTY3IDY2MC42NjcsNTgwLjgzMyA2NjEsNzIwLjVDIDY2Ni41MTIsNzMyLjQzMSA2NzQuODQ2LDczNC43NjUgNjg2LDcyNy41QyA2ODcsNzI1LjgzMyA2ODgsNzI0LjE2NyA2ODksNzIyLjVDIDY4OS4zMzMsNTgzLjE2NyA2ODkuNjY3LDQ0My44MzMgNjkwLDMwNC41QyA2OTcuMzMzLDI3Ny4wNzUgNzE1LjE2NiwyNjQuOTA5IDc0My41LDI2OEMgNzYwLjMzMywyNzIuODMzIDc3MS4xNjcsMjgzLjY2NyA3NzYsMzAwLjVDIDc3Ny4zMjUsNDQxLjEzMiA3NzcuOTkyLDU4MS43OTkgNzc4LDcyMi41QyA3ODMuMjUxLDczMS44NDQgNzkwLjc1MSw3MzQuMDExIDgwMC41LDcyOUMgODAyLjk1Niw3MjYuNTkyIDgwNC43ODksNzIzLjc1OSA4MDYsNzIwLjVDIDgwNi4zMzMsNTgwLjUgODA2LjY2Nyw0NDAuNSA4MDcsMzAwLjVDIDgxMC44NDYsMjg1Ljk4OCA4MTkuNjgsMjc1LjgyMSA4MzMuNSwyNzBDIDg1NC44MTksMjYzLjY2MyA4NzIuMzE5LDI2OS4xNjMgODg2LDI4Ni41QyA4ODguNTUxLDI5MC45MzUgODkwLjU1MSwyOTUuNjAxIDg5MiwzMDAuNUMgODkzLjE2MiwzOTEuMjkgODkzLjY2Miw0ODIuMTI0IDg5My41LDU3M0MgODkzLjY1NCw2NjUuODUyIDg5My4xNTQsNzU4LjY4NSA4OTIsODUxLjVDIDg4MC4yNzMsOTIzLjU2MiA4MzkuMjczLDk2OS41NjIgNzY5LDk4OS41QyA3NjguMzMzLDExMTcuODMgNzY4LjMzMywxMjQ2LjE3IDc2OSwxMzc0LjVDIDgzMy4yODgsMTI4OC43NiA4OTcuNDU1LDEyMDIuOTIgOTYxLjUsMTExN0MgMTA1MS4xNywxMTE2LjUgMTE0MC44MywxMTE2LjMzIDEyMzAuNSwxMTE2LjVDIDEyMzAuNjcsMTA3Mi4xNyAxMjMwLjUsMTAyNy44MyAxMjMwLDk4My41QyAxMTUyLjE5LDk2My4zNTUgMTA5Ny41Myw5MTYuMzU1IDEwNjYsODQyLjVDIDEwNDkuMTQsNzk5LjQ2MyAxMDQwLjE0LDc1NC43OTcgMTAzOSw3MDguNUMgMTAzNi4xNiw2MTguMTc4IDEwNTIuNSw1MzEuNTExIDEwODgsNDQ4LjVDIDExMDguNyw0MDEuODIyIDExMzcuMiwzNjAuNjU2IDExNzMuNSwzMjVDIDEyMDcuMjQsMjkzLjk2OCAxMjQ2LjksMjc0Ljk2OCAxMjkyLjUsMjY4QyAxMzUxLjg0LDI2My4yMjYgMTQwMy44NCwyODAuMjI2IDE0NDguNSwzMTlDIDE0ODkuMTIsMzU2LjM3MyAxNTIwLjI5LDQwMC41NCAxNTQyLDQ1MS41QyAxNTg1LjgxLDU1NC45NzIgMTU5OS40OCw2NjIuMzA1IDE1ODMsNzczLjVDIDE1NzQuNDUsODI0LjkxNSAxNTUzLjc4LDg3MC41ODEgMTUyMSw5MTAuNUMgMTQ5NC4zOCw5NDAuMjI0IDE0NjIuMjIsOTYxLjU1NyAxNDI0LjUsOTc0LjVDIDE0MjQuNSwxMDIxLjgzIDE0MjQuNSwxMDY5LjE3IDE0MjQuNSwxMTE2LjVDIDE0NjYuODMsMTExNi41IDE1MDkuMTcsMTExNi41IDE1NTEuNSwxMTE2LjVDIDE1NTEuNSwxMTcwLjUgMTU1MS41LDEyMjQuNSAxNTUxLjUsMTI3OC41QyAxNTA5LjE3LDEyNzguNSAxNDY2LjgzLDEyNzguNSAxNDI0LjUsMTI3OC41QyAxNDI0LjMzLDEzNjcuNSAxNDI0LjUsMTQ1Ni41IDE0MjUsMTU0NS41QyAxNDI5LjIsMTU3My4wNSAxNDQ1LjM3LDE1ODYuNzIgMTQ3My41LDE1ODYuNSBaIi8+PC9nPgo8Zz48cGF0aCBzdHlsZT0ib3BhY2l0eToxIiBmaWxsPSIjYzJlMjliIiBkPSJNIDE0NzMuNSwxNTg2LjUgQyAxNTAwLjE3LDE1ODYuNSAxNTI2LjgzLDE1ODYuNSAxNTUzLjUsMTU4Ni41QyAxNTUzLjUsMTY0MS44MyAxNTUzLjUsMTY5Ny4xNyAxNTUzLjUsMTc1Mi41QyAxNTE1LDE3NTIuODMgMTQ3Ni42NiwxNzUyLjUgMTQzOC41LDE3NTEuNUMgMTQ3Ni41LDE3NTEuNSAxNTE0LjUsMTc1MS41IDE1NTIuNSwxNzUxLjVDIDE1NTIuNSwxNjk2LjgzIDE1NTIuNSwxNjQyLjE3IDE1NTIuNSwxNTg3LjVDIDE1MjUuOTksMTU4Ny44MyAxNDk5LjY2LDE1ODcuNSAxNDczLjUsMTU4Ni41IFoiLz48L2c+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjEiIGZpbGw9IiNiOWRlOGMiIGQ9Ik0gMTIwMi41LDE3NTAuNSBDIDEyMDMuMDQsMTc1MC41NiAxMjAzLjM4LDE3NTAuODkgMTIwMy41LDE3NTEuNUMgMTEyMywxNzUyLjgzIDEwNDIuNjcsMTc1Mi44MyA5NjIuNSwxNzUxLjVDIDEwNDIuNjcsMTc1MS44MyAxMTIyLjY3LDE3NTEuNSAxMjAyLjUsMTc1MC41IFoiLz48L2c+Cjwvc3ZnPgo=');
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: 201;
+    pointer-events: none;
+  }
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  top:0;
+  left:0;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 76px;
+  height: 76px;
+  z-index: 12;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #fff;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  5% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}

package/dist/styles/uploader.less

@@ -0,0 +1,38 @@
+  .file-dragdrop-component {
+    display: inline-block;
+    width:100%;
+    border: 3px var(--primary-color) dashed;
+    border-radius: 16px;
+    padding:16px;
+    margin: 15px 0px;
+    background-color: white;
+    label {
+      font-size: 16px;
+      font-weight: bold;
+    }
+  
+  }
+  
+  .file-dragdrop-wrapper {
+  
+  }
+  
+  .file-dragdrop-text {
+  
+    font-size: 16px;
+    text-align: center;
+  }
+  
+  
+  .file-dragdrop-files {
+  
+  }
+  
+  .file-dragdrop-file {
+    width:70px;
+    float: left;
+    margin: 5px;
+    span {
+      font-size: 10px;
+    }
+  }

package/dist/variables/breakpoints.less

@@ -0,0 +1,35 @@
+// BREAKPOINTS
+@sidebar-large-width: 255px;
+@sidebar-small-width: 64px;
+
+// Breakpoints
+@screen-xs: 0; // Extra small devices (phones, less than 576px)
+@screen-sm: 576px; // Small devices (tablets, 576px and up)
+@screen-md: 768px; // Medium devices (desktops, 768px and up)
+@screen-lg: 992px; // Large devices (desktops, 992px and up)
+@screen-xl: 1200px; // Extra large devices (large desktops, 1200px and up)
+@screen-xxl: 1400px; // Extra extra large devices (larger desktops, 1400px and up)
+
+// Custom Min Breakpoints
+@screen-xs-min: @screen-xs; // Min width for extra small devices
+@screen-sm-min: @screen-sm; // Min width for small devices
+@screen-md-min: @screen-md; // Min width for medium devices
+@screen-lg-min: @screen-lg; // Min width for large devices
+@screen-xl-min: @screen-xl; // Min width for extra large devices
+@screen-xxl-min: @screen-xxl; // Min width for extra extra large devices
+
+// Max Breakpoints
+@screen-xs-max: 575.98px; // Max width for extra small devices
+@screen-sm-max: 767.98px; // Max width for small devices
+@screen-md-max: 991.98px; // Max width for medium devices
+@screen-lg-max: 1199.98px; // Max width for large devices
+@screen-xl-max: 1399.98px; // Max width for extra large devices
+
+@mq-min: 420px;
+@mq-xs: 520px;
+@mq-form: 650px;
+@mq-sm: 768px;
+@mq-md: 960px;
+@mq-lg: 1300px;
+@mq-all: 1520px;
+

package/dist/variables/colors.less

@@ -0,0 +1,205 @@
+// COLORS
+
+// Green Shades
+@green-1: #e8f5e9; // Light green
+@green-2: #c8e6c9; // Green 2
+@green-3: #a5d6a7; // Green 3
+@green-4: #81c784; // Green 4
+@green-5: #66bb6a; // Green 5
+@green-6: #4caf50; // Bootstrap success color (Green 6)
+@green-7: #43a047; // Green 7
+@green-8: #388e3c; // Green 8
+@green-9: #2e7d32; // Darker green
+@green-10: #1b5e20; // Dark green
+
+
+// Grey ColorPicker Variables
+@grey-2: #fafafa;
+@grey-3: #f5f5f5;
+@grey-4: #e8e8e8;
+@grey-5: #d9d9d9;
+@grey-6: #bfbfbf;
+@grey-7: #8c8c8c;
+@grey-8: #595959;
+@grey-9: #262626;
+
+
+// Additional Colors
+@blue: #007bff; // Blue
+@red: #dc3545; // Red
+@yellow: #ffc107; // Yellow
+@purple: #6f42c1; // Purple
+@orange: #fd7e14; // Orange
+@teal: #20c997; // Teal
+@pink: #e83e8c; // Pink
+
+// Blue Combinations
+@blue: #007bff; // Blue
+@blue-light: #66b2ff; // Light Blue
+@blue-dark: #0056b3; // Dark Blue
+@blue-contrast: #ffffff; // White (for text on blue)
+
+// Red Combinations
+@red: #dc3545; // Red
+@red-light: #ff6f61; // Light Red
+@red-dark: #b02a37; // Dark Red
+@red-contrast: #ffffff; // White (for text on red)
+
+// Yellow Combinations
+@yellow: #ffc107; // Yellow
+@yellow-light: #ffe57f; // Light Yellow
+@yellow-dark: #c69500; // Dark Yellow
+@yellow-contrast: #212529; // Dark Gray (for text on yellow)
+
+// Purple Combinations
+@purple: #6f42c1; // Purple
+@purple-light: #a77bca; // Light Purple
+@purple-dark: #5e35b1; // Dark Purple
+@purple-contrast: #ffffff; // White (for text on purple)
+
+// Orange Combinations
+@orange: #fd7e14; // Orange
+@orange-light: #ffb74d; // Light Orange
+@orange-dark: #e65100; // Dark Orange
+@orange-contrast: #ffffff; // White (for text on orange)
+
+// Teal Combinations
+@teal: #20c997; // Teal
+@teal-light: #80e0d8; // Light Teal
+@teal-dark: #00897b; // Dark Teal
+@teal-contrast: #ffffff; // White (for text on teal)
+
+// Pink Combinations
+@pink: #e83e8c; // Pink
+@pink-light: #f48fb1; // Light Pink
+@pink-dark: #c2185b; // Dark Pink
+@pink-contrast: #ffffff; // White (for text on pink)
+
+
+// Blue Shades
+@blue-1: #e3f2fd; // Light Blue
+@blue-2: #bbdefb; // Blue 2
+@blue-3: #90caf9; // Blue 3
+@blue-4: #64b5f6; // Blue 4
+@blue-5: #42a5f5; // Blue 5
+@blue-6: #2196f3; // Blue 6 (Base)
+@blue-7: #1e88e5; // Blue 7
+@blue-8: #1976d2; // Blue 8
+@blue-9: #1565c0; // Dark Blue
+
+// Red Shades
+@red-1: #ffebee; // Light Red
+@red-2: #ffcdd2; // Red 2
+@red-3: #ef9a9a; // Red 3
+@red-4: #e57373; // Red 4
+@red-5: #ef5350; // Red 5
+@red-6: #f44336; // Red 6 (Base)
+@red-7: #e53935; // Red 7
+@red-8: #d32f2f; // Red 8
+@red-9: #c62828; // Dark Red
+
+// Yellow Shades
+@yellow-1: #fffde7; // Light Yellow
+@yellow-2: #fff9c4; // Yellow 2
+@yellow-3: #fff59d; // Yellow 3
+@yellow-4: #fff176; // Yellow 4
+@yellow-5: #ffee58; // Yellow 5
+@yellow-6: #ffc107; // Yellow 6 (Base)
+@yellow-7: #ffb300; // Yellow 7
+@yellow-8: #ffa000; // Yellow 8
+@yellow-9: #ff8f00; // Dark Yellow
+
+// Purple Shades
+@purple-1: #f3e5f5; // Light Purple
+@purple-2: #e1bee7; // Purple 2
+@purple-3: #ce93d8; // Purple 3
+@purple-4: #ba68c8; // Purple 4
+@purple-5: #ab47bc; // Purple 5
+@purple-6: #9c27b0; // Purple 6 (Base)
+@purple-7: #8e24aa; // Purple 7
+@purple-8: #7b1fa2; // Purple 8
+@purple-9: #6a1b9a; // Dark Purple
+
+// Orange Shades
+@orange-1: #fff3e0; // Light Orange
+@orange-2: #ffe0b2; // Orange 2
+@orange-3: #ffcc80; // Orange 3
+@orange-4: #ffb74d; // Orange 4
+@orange-5: #ffa726; // Orange 5
+@orange-6: #ff9800; // Orange 6 (Base)
+@orange-7: #fb8c00; // Orange 7
+@orange-8: #f57c00; // Orange 8
+@orange-9: #ef6c00; // Dark Orange
+
+// Teal Shades
+@teal-1: #e0f2f1; // Light Teal
+@teal-2: #b2dfdb; // Teal 2
+@teal-3: #80cbc4; // Teal 3
+@teal-4: #4db6ac; // Teal 4
+@teal-5: #26a69a; // Teal 5
+@teal-6: #009688; // Teal 6 (Base)
+@teal-7: #00897b; // Teal 7
+@teal-8: #00796b; // Teal 8
+@teal-9: #00695c; // Dark Teal
+
+// Pink Shades
+@pink-1: #fce4ec; // Light Pink
+@pink-2: #f8bbd0; // Pink 2
+@pink-3: #f48fb1; // Pink 3
+@pink-4: #f06292; // Pink 4
+@pink-5: #ec407a; // Pink 5
+@pink-6: #e91e63; // Pink 6 (Base)
+@pink-7: #d81b60; // Pink 7
+@pink-8: #c2185b; // Pink 8
+@pink-9: #ad1457; // Dark Pink
+
+// Grayscale Colors
+@gray-1: #f8f9fa; // Light gray
+@gray-2: #e9ecef; // Gray 2
+@gray-3: #dee2e6; // Gray 3
+@gray-4: #ced4da; // Gray 4
+@gray-5: #adb5bd; // Gray 5
+@gray-6: #6c757d; // Gray 6
+@gray-7: #495057; // Dark gray
+@gray-8: #343a40; // Darker gray
+@gray-9: #212529; // Darkest gray
+
+
+
+@link-color: #171d3d;
+@dash-light-grey: #757575;
+@dash-blue: #4D4D4D;
+@dash-white-100: #FFFFFF;
+@main-bg: rgba(63, 63, 63, 0.5);
+@component-border: #cccccc;
+@dash-purple: #808080;
+@dash-purple-bg: #F2F2F2;
+@dash-light-blue: #999999;
+@dash-light-blue-bg: #E6E6E6;
+@dash-green: #666666;
+@dash-green-bg: #D9D9D9;
+@dash-disabled-color: #EEEEEE;
+@dash-red: #808080;
+@dash-yellow: #999999;
+@dash-yellow-bg: #E6E6E6;
+@dash-orange: #666666;
+@dash-orange-bg: #D9D9D9;
+@dash-error: #808080;
+@alert: #808080;
+@dash-null: #808080;
+@dash-null-bg: #EFEFF1;
+
+
+
+// Colors - Status
+@info-color: #1890ff;
+@success-color: #52c41a;
+@processing-color: #1890ff;
+@error-color: #f5222d;
+//@highlight-color: #49a000;
+@warning-color: #faad14;
+@normal-color: #d9d9d9;
+@danger-color: #ff4d4f;
+@light-color: #e8e8e8;
+
+

package/dist/variables/dash-colors.less

@@ -0,0 +1,52 @@
+@import './colors.less';
+
+/* This are default base colors for dash */
+/* Overwrite this variables in the domain dash-variables.less */
+
+
+// Colors - Status
+@info-color: #1890ff;
+@success-color: #52c41a;
+@processing-color: #1890ff;
+@error-color: #f5222d;
+@highlight-color: #f5222d;
+@warning-color: #faad14;
+@normal-color: #d9d9d9;
+@danger-color: #ff4d4f;
+@light-color: #e8e8e8;
+
+// Colors - Basic
+@highlight-color: #FFFFFF;
+@highlight-color: #ffffff;
+@black: #000000;
+@pink: #E6E6E6;
+
+// Colors - Brand
+@dash-blue: #4D4D4D;
+@dash-purple: #808080;
+@dash-light-blue: #999999;
+@dash-green: #666666;
+@dash-red: #808080;
+@dash-yellow: #999999;
+@dash-orange: #666666;
+@dash-error: #808080;
+@alert: #808080;
+@dash-null: #808080;
+@dash-light-grey: #757575;
+
+// Colors - Background Variants
+@dash-purple-bg: #F2F2F2;
+@dash-light-blue-bg: #E6E6E6;
+@dash-green-bg: #D9D9D9;
+@dash-yellow-bg: #E6E6E6;
+@dash-orange-bg: #D9D9D9;
+@dash-null-bg: #EFEFF1;
+
+@dash-scroll-width: 6px;
+
+@table-header-color: #999;
+@table-header-bg: #CCC;
+@table-header-color--light: #ffffff;
+@table-header-bg--light: #69de00;
+@table-header-color--dark: #49a000;
+@table-header-bg--dark: #3aaa00;