feat(styling): add a new color-disabled

ghiscoding · May 31, 2021 · 7151198 · 7151198
1 parent 80073fe
commit 7151198
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/icons.html b/examples/webpack-demo-vanilla-bundle/src/examples/icons.html
@@ -317,6 +317,10 @@ <h4 class="title is-4 section-title">
     <span class="mdi mdi-help-circle mdi-22px color-body"></span>
     <span class="color-body">color-body</span>
   </div>
+  <div class="slick-col-medium-2">
+    <span class="mdi mdi-help-circle mdi-22px color-disabled"></span>
+    <span class="color-disabled">color-disabled</span>
+  </div>
   <div class="slick-col-medium-2" style="background-color: #3F3E3E;">
     <span class="mdi mdi-help-circle mdi-22px color-light"></span>
     <span class="color-light">color-light</span>
@@ -333,4 +337,4 @@ <h4 class="title is-4 section-title">
   <span class="icon-counter subtitle has-text-grey-dark"></span>
 </h4>
 <div class=" icons-container section-container">
-</div>
+</div>
diff --git a/packages/common/src/styles/colors-from-filters.scss b/packages/common/src/styles/colors-from-filters.scss
@@ -17,6 +17,7 @@ $color-dark: #343a40 !default;
 $color-body: #212529 !default;
 $color-muted: #6c757d !default;
 $color-white: #ffffff !default;
+$color-disabled: #DDDBDA !default;
 $color-alt-default: #1e87f0 !default;
 $color-alt-warning: #faa05a !default;
 $color-alt-danger: #f0506e !default;
@@ -43,6 +44,7 @@ $color-sf-primary-dark: #004487 !default;
 .color-body { filter: brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(824%) hue-rotate(169deg) brightness(94%) contrast(91%); }
 .color-muted { filter: brightness(0) saturate(100%) invert(50%) sepia(2%) saturate(2378%) hue-rotate(168deg) brightness(89%) contrast(84%); }
 .color-white { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(54deg) brightness(109%) contrast(101%); }
+.color-disabled { filter: brightness(0) saturate(100%) invert(81%) sepia(2%) saturate(180%) hue-rotate(335deg) brightness(108%) contrast(96%); }
 .color-alt-default { filter: brightness(0) saturate(100%) invert(46%) sepia(70%) saturate(3992%) hue-rotate(193deg) brightness(99%) contrast(90%); }
 .color-alt-warning { filter: brightness(0) saturate(100%) invert(59%) sepia(94%) saturate(289%) hue-rotate(341deg) brightness(98%) contrast(99%); }
 .color-alt-danger { filter: brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(805%) hue-rotate(308deg) brightness(99%) contrast(90%); }

diff --git a/packages/common/src/styles/colors.scss b/packages/common/src/styles/colors.scss
@@ -20,6 +20,7 @@ $color-dark: #343a40 !default;
 $color-body: #212529 !default;
 $color-muted: #6c757d !default;
 $color-white: #ffffff !default;
+$color-disabled: #DDDBDA !default;
 $color-alt-default: #1e87f0 !default;
 $color-alt-warning: #faa05a !default;
 $color-alt-danger: #f0506e !default;
@@ -46,6 +47,7 @@ $color-sf-primary-dark: #004487 !default;
 .color-body { @include recolor($color-body, 1); }
 .color-muted { @include recolor($color-muted, 1); }
 .color-white { @include recolor($color-white, 1); }
+.color-disabled { @include recolor($color-disabled, 1); }
 .color-alt-default { @include recolor($color-alt-default, 1); }
 .color-alt-warning { @include recolor($color-alt-warning, 1); }
 .color-alt-danger { @include recolor($color-alt-danger, 1); }