Colorblind mode

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.8.0
+*   Added colorblind mode (settings -> rising -> colorblind mode)
+
+
 ## 1.7.0
 *   Option for serving ads in random order
 *   Fixed Twitter previews crashing the app

README.md

@@ -1,7 +1,7 @@
 # Download
-[Windows](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-win.exe) (75 MB)
+[Windows](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-win.exe) (75 MB)
-| [MacOS](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-macos.dmg) (76 MB)
+| [MacOS](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-macos.dmg) (76 MB)
-| [Linux](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-linux.AppImage) (76 MB)
+| [Linux](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-linux.AppImage) (76 MB)
 
 
 # F-Chat Rising
@@ -66,6 +66,7 @@ This repository contains a heavily customized version of the mainline F-Chat 3.0
     *    PM list shows characters' online status as a colored icon
     *    Use `Ctrl+Tab`, `Ctrl+Shift+Tab`, `Ctrl+PgDown`, and `Ctrl+PgUp` to switch between character tabs
     *    Show number of unread notes and messages in the bottom right corner
+    *    Colorblind mode
 *   Technical Details for Nerds
     *    Upgraded to Electron 10.x
     *    Replaced `node-spellchecker` with the built-in spellchecker that ships with Electron 8+

chat/ChatView.vue

@@ -362,6 +362,10 @@
         getClasses(conversation: Conversation): string {
             return conversation === core.conversations.selectedConversation ? ' active' : unreadClasses[conversation.unread];
         }
+
+        isColorblindModeActive(): boolean {
+          return core.state.settings.risingColorblindMode;
+        }
     }
 </script>
 

chat/ConversationView.vue

@@ -785,8 +785,8 @@
             padding-bottom: 2px;
 
             &.unicorn {
-              background-color: #00adad;
+              background-color: var(--scoreUnicornMatchBg);
-              border: solid 1px #1d9a9a;
+              border: 1px solid var(--scoreUnicornMatchFg);
               box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.5);
 
               &::before {

chat/SettingsView.vue

@@ -192,6 +192,13 @@
                 </label>
             </div>
 
+            <div class="form-group">
+                <label class="control-label" for="risingColorblindMode">
+                    <input type="checkbox" id="risingColorblindMode" v-model="risingColorblindMode"/>
+                    Colorblind mode
+                </label>
+            </div>
+
         </div>
         <div v-show="selectedTab === '3'">
             <template v-if="hidden.length">
@@ -260,6 +267,7 @@
         risingComparisonInSearch!: boolean;
 
         risingShowUnreadOfflineCount!: boolean;
+        risingColorblindMode!: boolean;
 
 
         async load(): Promise<void> {
@@ -295,6 +303,8 @@
             this.risingComparisonInUserMenu = settings.risingComparisonInUserMenu;
             this.risingComparisonInSearch = settings.risingComparisonInSearch;
             this.risingShowUnreadOfflineCount = settings.risingShowUnreadOfflineCount;
+
+            this.risingColorblindMode = settings.risingColorblindMode;
         }
 
         async doImport(): Promise<void> {
@@ -347,7 +357,9 @@
                 risingCharacterPreview: this.risingCharacterPreview,
                 risingComparisonInUserMenu: this.risingComparisonInUserMenu,
                 risingComparisonInSearch: this.risingComparisonInSearch,
-                risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount
+                risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount,
+
+                risingColorblindMode: this.risingColorblindMode
             };
             if(this.notifications) await core.notifications.requestPermission();
         }

chat/assets/filters.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1">
+  <defs>
+    <filter id="protanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.567, 0.433, 0,     0, 0
+                0.558, 0.442, 0,     0, 0
+                0,     0.242, 0.758, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="protanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.817, 0.183, 0,     0, 0
+                0.333, 0.667, 0,     0, 0
+                0,     0.125, 0.875, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="deuteranopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.625, 0.375, 0,   0, 0
+                0.7,   0.3,   0,   0, 0
+                0,     0.3,   0.7, 0, 0
+                0,     0,     0,   1, 0"/>
+    </filter>
+    <filter id="deuteranomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.8,   0.2,   0,     0, 0
+                0.258, 0.742, 0,     0, 0
+                0,     0.142, 0.858, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="tritanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.95, 0.05,  0,     0, 0
+                0,    0.433, 0.567, 0, 0
+                0,    0.475, 0.525, 0, 0
+                0,    0,     0,     1, 0"/>
+    </filter>
+    <filter id="tritanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.967, 0.033, 0,     0, 0
+                0,     0.733, 0.267, 0, 0
+                0,     0.183, 0.817, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="achromatopsia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.299, 0.587, 0.114, 0, 0
+                0.299, 0.587, 0.114, 0, 0
+                0.299, 0.587, 0.114, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="achromatomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.618, 0.320, 0.062, 0, 0
+                0.163, 0.775, 0.062, 0, 0
+                0.163, 0.320, 0.516, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+  </defs>
+</svg>

chat/common.ts

@@ -53,6 +53,7 @@ export class Settings implements ISettings {
     risingComparisonInSearch = true;
 
     risingShowUnreadOfflineCount = true;
+    risingColorblindMode = false;
 }
 
 

chat/interfaces.ts

@@ -219,6 +219,7 @@ export namespace Settings {
         readonly risingComparisonInSearch: boolean;
 
         readonly risingShowUnreadOfflineCount: boolean;
+        readonly risingColorblindMode: boolean;
     }
 }
 

docs/_config.yml

@@ -49,7 +49,7 @@ theme: jekyll-theme-slate
 changelog: https://github.com/mrstallion/fchat-rising/blob/master/CHANGELOG.md
 
 download:
-  version: 1.7.0
+  version: 1.8.0
 
   url: https://github.com/mrstallion/fchat-rising/releases/download/v%VERSION%/F-Chat-Rising-%VERSION%-%PLATFORM_TAIL%
 

electron/Index.vue

@@ -443,10 +443,16 @@
         }
 
 
-        getThemeClass(): string {
+        getThemeClass(): Record<string, boolean> {
-            return `theme-${this.settings.theme}`;
+          try {
+            return {
+              [`theme-${this.settings.theme}`]: true,
+              colorblindMode: core.state.settings.risingColorblindMode
+            };
+          } catch(err) {
+            return { [`theme-${this.settings.theme}`]: true };
+          }
         }
-
 
         nextProfile(): void {
           if (!this.nextProfileAvailable()) {

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fchat",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "The F-List Team and Mister Stallion (Esq.)",
   "description": "F-List.net Chat Client",
   "main": "main.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "f-list-rising",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "The F-List Team and and Mister Stallion (Esq.)",
   "description": "A heavily modded F-Chat 3.0 client for F-List",
   "license": "MIT",

scss/_rising.scss

@@ -1,55 +1,54 @@
-:root {
+$risingVariables: (
-  --scoreMatchBg: #{$scoreMatchBg};
+  scoreMatchBg: #{$scoreMatchBg},
-  --scoreMatchFg: #{$scoreMatchFg};
+  scoreMatchFg: #{$scoreMatchFg},
-  --scoreWeakMatchBg: #{$scoreWeakMatchBg};
+  scoreWeakMatchBg: #{$scoreWeakMatchBg},
-  --scoreWeakMatchFg: #{$scoreWeakMatchFg};
+  scoreWeakMatchFg: #{$scoreWeakMatchFg},
-  --scoreWeakMismatchBg: #{$scoreWeakMismatchBg};
+  scoreWeakMismatchBg: #{$scoreWeakMismatchBg},
-  --scoreWeakMismatchFg: #{$scoreWeakMismatchFg};
+  scoreWeakMismatchFg: #{$scoreWeakMismatchFg},
-  --scoreMismatchBg: #{$scoreMismatchBg};
+  scoreMismatchBg: #{$scoreMismatchBg},
-  --scoreMismatchFg: #{$scoreMismatchFg};
+  scoreMismatchFg: #{$scoreMismatchFg},
-  --scoreTitleColor: #{$scoreTitleColor};
+  scoreTitleColor: #{$scoreTitleColor},
-  --scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg};
+  scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg},
-  --scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg};
+  scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg},
-  --scoreReportBg: #{$scoreReportBg};
+  scoreReportBg: #{$scoreReportBg},
 
-  --scoreFadedMatchBg: #{$scoreFadedMatchBg};
+  scoreFadedMatchBg: #{$scoreFadedMatchBg},
-  --scoreFadedMatchFg: #{$scoreFadedMatchFg};
+  scoreFadedMatchFg: #{$scoreFadedMatchFg},
-  --scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg};
+  scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg},
-  --scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg};
+  scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg},
-  --scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg};
+  scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg},
-  --scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg};
+  scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg},
-  --scoreFadedMismatchBg: #{$scoreFadedMismatchBg};
+  scoreFadedMismatchBg: #{$scoreFadedMismatchBg},
-  --scoreFadedMismatchFg: #{$scoreFadedMismatchFg};
+  scoreFadedMismatchFg: #{$scoreFadedMismatchFg},
 
-  --scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor};
+  scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor},
-  --scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor};
+  scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor},
-  --scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor};
+  scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor},
-  --scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor};
+  scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor},
-  --scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor};
+  scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor},
-  --scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor};
+  scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor},
-  --scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor};
+  scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor},
-  --scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor};
+  scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor},
 
-  --characterImageWrapperBg: #{$characterImageWrapperBg};
+  characterImageWrapperBg: #{$characterImageWrapperBg},
-  --characterGuestbookPostBg: #{$characterGuestbookPostBg};
+  characterGuestbookPostBg: #{$characterGuestbookPostBg},
-  --characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor};
+  characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor},
-  --characterGuestbookReplyBg: #{$characterGuestbookReplyBg};
+  characterGuestbookReplyBg: #{$characterGuestbookReplyBg},
-  --characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg};
+  characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg},
-  --characterKinkCustomColor: #{$characterKinkCustomColor};
+  characterKinkCustomColor: #{$characterKinkCustomColor},
-  --characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor};
+  characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor},
-  --characterKinkStockColor: #{$characterKinkStockColor};
+  characterKinkStockColor: #{$characterKinkStockColor},
-  --characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor};
+  characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor},
-  --characterInfotagColor: #{$characterInfotagColor};
+  characterInfotagColor: #{$characterInfotagColor},
 
-  --messageTimeBgColor: #{$messageTimeBgColor};
+  messageTimeBgColor: #{$messageTimeBgColor},
-  --messageTimeFgColor: #{$messageTimeFgColor};
+  messageTimeFgColor: #{$messageTimeFgColor},
 
-  --headerBackgroundMaskColor: #{$headerBackgroundMaskColor};
+  headerBackgroundMaskColor: #{$headerBackgroundMaskColor},
 
-  --linkForcedColor: #{$linkForcedColor};
+  linkForcedColor: #{$linkForcedColor},
-  --tabSecondaryFgColor: #{$tabSecondaryFgColor};
+  tabSecondaryFgColor: #{$tabSecondaryFgColor},
-
-  --input-bg: #{$input-bg};
-  --input-color: #{$input-color};
-}
 
+  input-bg: #{$input-bg},
+  input-color: #{$input-color},
+);

scss/themes/_chat.scss

@@ -34,6 +34,14 @@
 @import "../flist_overrides";
 @import "../rising";
 
+
+:root {
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}
+
+
 * {
   &::-webkit-scrollbar-track {
     box-shadow: inset 0 0 8px $card-border-color;

scss/themes/_colorblind.scss

@@ -0,0 +1,40 @@
+$scoreUnicornMatchBg: #0093d2;
+$scoreUnicornMatchFg: #0093d2;
+$scoreMatchBg: #006cb7;
+$scoreMatchFg: #006cb7;
+$scoreWeakMatchBg: #015486;
+$scoreWeakMatchFg: #015486;
+$scoreWeakMismatchBg: #606060;
+$scoreWeakMismatchFg: #606060;
+$scoreMismatchBg: #ab0000;
+$scoreMismatchFg: #ab0000;
+
+$scoreStandoutMatchBorderColor: #049ada;
+$scoreStandoutMatchBgColor: rgba(4, 132, 186, 0.47);
+$scoreStandoutWeakMatchBorderColor: #006cb7;
+$scoreStandoutWeakMatchBgColor: rgba(2, 91, 153, 0.4);
+$scoreStandoutNeutralBorderColor: rgba(0, 0, 0, 0);
+$scoreStandoutWeakMismatchBorderColor: #888;
+$scoreStandoutWeakMismatchBgColor: rgba(170, 170, 170, 0.0);
+$scoreStandoutMismatchBorderColor: #ab0000;
+
+$genders: (
+        "shemale": #e2445f,
+        "herm": #d40759,
+        "none": $gray-500,
+        "female": #66ff74,
+        "male": #6699ff,
+        "male-herm": #007fff,
+        "transgender": #ee8822,
+        "cunt-boy": #63ee22,
+);
+
+@each $gender, $color in $genders {
+  .gender-#{$gender} {
+    color: $color;
+  }
+
+  .message-event .gender-#{$gender} {
+    color: lighten($color, 5%)
+  }
+}

scss/themes/chat/dark.scss

@@ -31,3 +31,12 @@
         }
     }
 }
+
+.colorblindMode {
+  @import "../colorblind";
+  @import "../../rising";
+
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}

scss/themes/chat/default.scss

@@ -31,3 +31,28 @@
     }
   }
 }
+
+.colorblindMode {
+  @import "../colorblind";
+  @import "../../rising";
+
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}
+
+//@import "../../util/accecss";
+//
+//@include accecss(
+//  'html body',
+//  false,
+//  false,
+//  tritanopia
+//);
+
+// deuteranomaly
+// protanomaly
+// protanopia
+// deuteranopia
+// tritanomaly
+// tritanopia

scss/themes/chat/light.scss

@@ -31,3 +31,12 @@
         }
     }
 }
+
+.colorblindMode {
+  @import "../colorblind";
+  @import "../../rising";
+
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}

scss/themes/variables/_dark_variables.scss

@@ -60,6 +60,8 @@ $text-background-color: $gray-100;
 $text-background-color-disabled: $gray-200;
 
 // F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
 $scoreMatchBg: rgb(0, 142, 0);
 $scoreMatchFg: rgb(0, 113, 0);
 $scoreWeakMatchBg: rgb(0, 80, 0);
@@ -73,6 +75,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
 $scoreMinimizeButtonBg: rgba(0,0,0,0.2);
 $scoreReportBg: rgba(0,0,0,0.2);
 
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
 $scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
 $scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
 $scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);

scss/themes/variables/_default_variables.scss

@@ -59,6 +59,8 @@ $text-background-color: $gray-200;
 $text-background-color-disabled: $gray-100;
 
 // F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
 $scoreMatchBg: rgb(0, 142, 0);
 $scoreMatchFg: rgb(0, 113, 0);
 $scoreWeakMatchBg: rgb(0, 80, 0);
@@ -72,6 +74,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
 $scoreMinimizeButtonBg: rgba(0,0,0,0.2);
 $scoreReportBg: rgba(0,0,0,0.2);
 
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
 $scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
 $scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
 $scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);

scss/themes/variables/_light_variables.scss

@@ -15,6 +15,8 @@ $text-muted: $gray-500;
 
 
 // F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
 $scoreMatchBg: rgba(0, 180, 0, 0.65);
 $scoreMatchFg: rgba(0, 133, 0, 0.4);
 $scoreWeakMatchBg: rgba(0, 180, 0, 0.22);
@@ -28,6 +30,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.6);
 $scoreMinimizeButtonBg: rgba(0,0,0,0.1);
 $scoreReportBg: rgba(0,0,0,0.08);
 
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
 $scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
 $scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
 $scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);

scss/util/accecss.scss

@@ -0,0 +1,175 @@
+/// GRID
+
+$path-to-filter: '../../../chat/assets';
+
+@mixin log(){
+  content:'.'attr(class);position: absolute;
+  top: 0;left: 0;z-index: 99999999;padding: .1em;background: rgba(0,0,0, .9);
+  opacity: .1;
+  color: #fff !important;
+  font-size: 14px;
+}
+
+@mixin grid(){
+
+
+  box-shadow: inset 0 0 0 1px rgba(purple, .1) !important;
+  &:hover{
+    box-shadow: inset 0 0 0 1px rgba(purple, 1) !important;
+  }
+  *{
+    box-shadow: inset 0 0 0 1px rgba(red, .1) !important;
+    &:hover{
+      box-shadow: inset 0 0 0 1px rgba(red, 1) !important;
+    }
+    + *{
+      box-shadow: inset 0 0 0 1px rgba(blue, .1) !important;
+      &:hover{
+        box-shadow: inset 0 0 0 1px rgba(blue, 1) !important;
+      }
+      + *{
+        box-shadow: inset 0 0 0 1px rgba(green, .1) !important;
+        &:hover{
+          box-shadow: inset 0 0 0 1px rgba(green, 1) !important;
+        }
+        + *{
+          box-shadow: inset 0 0 0 1px rgba(purple, .1) !important;
+          &:hover{
+            box-shadow: inset 0 0 0 1px rgba(purple, 1) !important;
+          }
+          + *{
+            box-shadow: inset 0 0 0 1px rgba(red, .1) !important;
+            &:hover{
+              box-shadow: inset 0 0 0 1px rgba(red, 1) !important;
+            }
+            +  *{
+              box-shadow: inset 0 0 0 1px rgba(blue, .1) !important;
+              &:hover{
+                box-shadow: inset 0 0 0 1px rgba(blue, 1) !important;
+              }
+              +  *{
+                box-shadow: inset 0 0 0 1px rgba(green, .1) !important;
+                &:hover{
+                  box-shadow: inset 0 0 0 1px rgba(green, 1) !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/// Mixin debug
+/// @include debug(<true:false>, <true:false>, <false:filterName>, <false:elementName>);
+/// Param :
+///        [1]: Specified debug element
+///        [2]: css zone
+///        [3]: Grayscale view
+///        [4]: Colorblind filters **
+///
+/// ** Available filters : `protanopia`, `protanomaly`, `deuteranopia`, `deuteranomaly`, `tritanopia`, `tritanomaly`, `achromatopsia`, `achromatomal
+///
+///
+/// Usage :
+/// `@include accecss(<element:false>, <true:false>, <true:false>, <filterName:false>);`
+///
+/// @group helpers
+
+@mixin accecss($element: false, $zones: false, $grayscale: false, $cbFilter: false){
+
+  @if $grayscale == true and $cbFilter == false {
+    @if $element != false {
+      #{$element} {
+        filter: grayscale(100%);
+      }
+    }
+
+    @else {
+      html body {
+        filter: grayscale(100%);
+      }
+    }
+  }
+  @else if $grayscale == true and $cbFilter != false {
+    @if $element != false {
+      #{$element} {
+
+
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
+
+      }
+    }
+
+    @else {
+      html body {
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
+      }
+    }
+  }
+
+  @else if $grayscale == false and $cbFilter != false{
+    @if $element != false {
+      #{$element} {
+
+
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
+
+      }
+    }
+
+    @else {
+      html body {
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
+      }
+    }
+  }
+
+  @else if $cbFilter != false and $element != false {
+    @if $element != false {
+      #{$element} {
+
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
+
+      }
+    }
+
+    @else {
+      html body {
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
+      }
+    }
+  }
+
+  @if $zones == true or
+  $zones == 'logs' or
+  $grayscale == true and $cbFilter == false and $zones == true or
+  $grayscale == true and $cbFilter != false and $zones == true or
+  $grayscale == false and $cbFilter != false and $zones == true    {
+    /*
+      CSS accecss : TRUE
+      */
+
+      @if $element == false {
+        html, body{
+          @include grid();
+        }
+      }
+
+      @else if $element != false {
+        #{$element}{
+          @include grid();
+        }
+      }
+    }
+
+
+  @else{
+  /*
+  CSS accecss : FALSE
+  */
+  }
+}
+