neo.mjs 5.18.0 → 6.0.0

package/resources/scss/theme-dark/button/Base.scss

@@ -4,226 +4,115 @@ $border-style    : solid;
 $border-width    : 1px;
 $text-color      : #bbb;
 
-$neoMap: map-merge($neoMap, (
-    'button-background-color'                   : $background-color,
-    'button-background-color-active'            : #373a3c,
-    'button-background-color-disabled'          : $background-color,
-    'button-background-color-hover'             : #3a3c3e,
-    'button-background-image'                   : linear-gradient(#434749, #323536),
-    'button-background-gradient-end'            : #323536,
-    'button-background-gradient-start'          : #434749,
-    'button-badge-background-color'             : #64b5f6,
-    'button-badge-color'                        : #282828,
-    'button-badge-margin-left'                  : -10px,
-    'button-badge-margin-top'                   : -10px,
-    'button-border'                             : 1px $border-style $border-color,
-    'button-border-active'                      : 1px $border-style #282828,
-    'button-border-disabled'                    : 1px $border-style $border-color,
-    'button-border-hover'                       : 1px $border-style #292929,
-    'button-border-pressed'                     : 1px $border-style #5d83a7,
-    'button-border-radius'                      : 0,
-    'button-border-width'                       : 1px,
-    'button-glyph-color'                        : $text-color,
-    'button-glyph-color-active'                 : $text-color,
-    'button-glyph-color-disabled'               : $text-color,
-    'button-glyph-color-hover'                  : $text-color,
-    'button-height'                             : inherit,
-    'button-margin'                             : 2px,
-    'button-opacity-disabled'                   : #{neo(neo-disabled-opacity)},
-    'button-outline-active'                     : none,
-    'button-padding'                            : 5px 12px 5px 12px,
-    'button-ripple-background-color'            : darken(#5d83a7, 10%),
-    'button-text-color'                         : $text-color,
-    'button-text-color-active'                  : $text-color,
-    'button-text-color-disabled'                : $text-color,
-    'button-text-color-hover'                   : $text-color,
-    'button-text-font-family'                   : #{neo(neo-font-family)},
-    'button-text-font-size'                     : 11px,
-    'button-text-font-weight'                   : 600,
-    'button-text-line-height'                   : 11px,
-    'button-text-transform'                     : none,
-    'button-use-gradients'                      : true,
+:root .neo-theme-dark { // .neo-button
+    --button-background-color                   : #{$background-color};
+    --button-background-color-active            : #373a3c;
+    --button-background-color-disabled          : #{$background-color};
+    --button-background-color-hover             : #3a3c3e;
+    --button-background-image                   : linear-gradient(#434749, #323536);
+    --button-background-gradient-end            : #323536;
+    --button-background-gradient-start          : #434749;
+    --button-badge-background-color             : #64b5f6;
+    --button-badge-color                        : #282828;
+    --button-badge-margin-left                  : -10px;
+    --button-badge-margin-top                   : -10px;
+    --button-border                             : 1px #{$border-style} #{$border-color};
+    --button-border-active                      : 1px #{$border-style} #282828;
+    --button-border-disabled                    : 1px #{$border-style} #{$border-color};
+    --button-border-hover                       : 1px #{$border-style} #292929;
+    --button-border-pressed                     : 1px #{$border-style} #5d83a7;
+    --button-border-radius                      : 0;
+    --button-border-width                       : 1px;
+    --button-glyph-color                        : #{$text-color};
+    --button-glyph-color-active                 : #{$text-color};
+    --button-glyph-color-disabled               : #{$text-color};
+    --button-glyph-color-hover                  : #{$text-color};
+    --button-height                             : inherit;
+    --button-margin                             : 2px;
+    --button-opacity-disabled                   : var(--neo-disabled-opacity);
+    --button-outline-active                     : none;
+    --button-padding                            : 5px 12px 5px 12px;
+    --button-ripple-background-color            : #{darken(#5d83a7, 10%)};
+    --button-text-color                         : #{$text-color};
+    --button-text-color-active                  : #{$text-color};
+    --button-text-color-disabled                : #{$text-color};
+    --button-text-color-hover                   : #{$text-color};
+    --button-text-font-family                   : var(--neo-font-family);
+    --button-text-font-size                     : 11px;
+    --button-text-font-weight                   : 600;
+    --button-text-line-height                   : 11px;
+    --button-text-transform                     : none;
+    --button-use-gradients                      : true;
 
-    // {module: Button, ui: 'ghost'}
-    'button-ghost-background-color'             : var(--button-text-color),
-    'button-ghost-background-color-active'      : #373a3c,
-    'button-ghost-background-color-disabled'    : inherit,
-    'button-ghost-background-color-hover'       : var(--button-text-color),
-    'button-ghost-background-image'             : none,
-    'button-ghost-badge-background-color'       : var(--button-badge-color),
-    'button-ghost-badge-color'                  : var(--button-badge-background-color),
-    'button-ghost-border'                       : 1px $border-style var(--button-background-color),
-    'button-ghost-border-active'                : 1px $border-style #282828,
-    'button-ghost-border-disabled'              : inherit,
-    'button-ghost-border-hover'                 : 1px $border-style #282828,
-    'button-ghost-border-pressed'               : 1px $border-style #5d83a7,
-    'button-ghost-glyph-color'                  : var(--button-background-color),
-    'button-ghost-glyph-color-active'           : var(--button-background-color),
-    'button-ghost-glyph-color-disabled'         : inherit,
-    'button-ghost-glyph-color-hover'            : var(--button-background-color),
-    'button-ghost-opacity-disabled'             : var(--neo-disabled-opacity),
-    'button-ghost-ripple-background-color'      : inherit,
-    'button-ghost-text-color'                   : var(--button-background-color),
-    'button-ghost-text-color-active'            : var(--button-background-color),
-    'button-ghost-text-color-disabled'          : inherit,
-    'button-ghost-text-color-hover'             : var(--button-background-color),
+    // {module: Button, ui: --ghost}
+    --button-ghost-background-color             : var(--button-text-color);
+    --button-ghost-background-color-active      : #373a3c;
+    --button-ghost-background-color-disabled    : inherit;
+    --button-ghost-background-color-hover       : var(--button-text-color);
+    --button-ghost-background-image             : none;
+    --button-ghost-badge-background-color       : var(--button-badge-color);
+    --button-ghost-badge-color                  : var(--button-badge-background-color);
+    --button-ghost-border                       : 1px #{$border-style} var(--button-background-color);
+    --button-ghost-border-active                : 1px #{$border-style} #282828;
+    --button-ghost-border-disabled              : inherit;
+    --button-ghost-border-hover                 : 1px #{$border-style} #282828;
+    --button-ghost-border-pressed               : 1px #{$border-style} #5d83a7;
+    --button-ghost-glyph-color                  : var(--button-background-color);
+    --button-ghost-glyph-color-active           : var(--button-background-color);
+    --button-ghost-glyph-color-disabled         : inherit;
+    --button-ghost-glyph-color-hover            : var(--button-background-color);
+    --button-ghost-opacity-disabled             : var(--neo-disabled-opacity);
+    --button-ghost-ripple-background-color      : inherit;
+    --button-ghost-text-color                   : var(--button-background-color);
+    --button-ghost-text-color-active            : var(--button-background-color);
+    --button-ghost-text-color-disabled          : inherit;
+    --button-ghost-text-color-hover             : var(--button-background-color);
 
-    // {module: Button, ui: 'secondary'}
-    'button-secondary-background-color'         : var(--button-text-color),
-    'button-secondary-background-color-active'  : #373a3c,
-    'button-secondary-background-color-disabled': inherit,
-    'button-secondary-background-color-hover'   : var(--button-text-color),
-    'button-secondary-background-image'         : none,
-    'button-secondary-badge-background-color'   : var(--button-badge-color),
-    'button-secondary-badge-color'              : var(--button-badge-background-color),
-    'button-secondary-border'                   : 1px $border-style var(--button-background-color),
-    'button-secondary-border-active'            : 1px $border-style #282828,
-    'button-secondary-border-disabled'          : inherit,
-    'button-secondary-border-hover'             : 1px $border-style #292929,
-    'button-secondary-border-pressed'           : 1px $border-style #5d83a7,
-    'button-secondary-glyph-color'              : var(--button-background-color),
-    'button-secondary-glyph-color-active'       : var(--button-background-color),
-    'button-secondary-glyph-color-disabled'     : inherit,
-    'button-secondary-glyph-color-hover'        : var(--button-background-color),
-    'button-secondary-opacity-disabled'         : var(--neo-disabled-opacity),
-    'button-secondary-ripple-background-color'  : inherit,
-    'button-secondary-text-color'               : var(--button-background-color),
-    'button-secondary-text-color-active'        : var(--button-background-color),
-    'button-secondary-text-color-disabled'      : inherit,
-    'button-secondary-text-color-hover'         : var(--button-background-color),
+    // {module: Button, ui: --secondary}
+    --button-secondary-background-color         : var(--button-text-color);
+    --button-secondary-background-color-active  : #373a3c;
+    --button-secondary-background-color-disabled: inherit;
+    --button-secondary-background-color-hover   : var(--button-text-color);
+    --button-secondary-background-image         : none;
+    --button-secondary-badge-background-color   : var(--button-badge-color);
+    --button-secondary-badge-color              : var(--button-badge-background-color);
+    --button-secondary-border                   : 1px #{$border-style} var(--button-background-color);
+    --button-secondary-border-active            : 1px #{$border-style} #282828;
+    --button-secondary-border-disabled          : inherit;
+    --button-secondary-border-hover             : 1px #{$border-style} #292929;
+    --button-secondary-border-pressed           : 1px #{$border-style} #5d83a7;
+    --button-secondary-glyph-color              : var(--button-background-color);
+    --button-secondary-glyph-color-active       : var(--button-background-color);
+    --button-secondary-glyph-color-disabled     : inherit;
+    --button-secondary-glyph-color-hover        : var(--button-background-color);
+    --button-secondary-opacity-disabled         : var(--neo-disabled-opacity);
+    --button-secondary-ripple-background-color  : inherit;
+    --button-secondary-text-color               : var(--button-background-color);
+    --button-secondary-text-color-active        : var(--button-background-color);
+    --button-secondary-text-color-disabled      : inherit;
+    --button-secondary-text-color-hover         : var(--button-background-color);
 
-    // {module: Button, ui: 'tertiary'}
-    'button-tertiary-background-color'          : transparent,
-    'button-tertiary-background-color-active'   : #373a3c,
-    'button-tertiary-background-color-disabled' : inherit,
-    'button-tertiary-background-color-hover'    : var(--button-background-color-hover),
-    'button-tertiary-background-image'          : none,
-    'button-tertiary-badge-background-color'    : var(--button-badge-background-color),
-    'button-tertiary-badge-color'               : var(--button-badge-color),
-    'button-tertiary-border'                    : 1px $border-style transparent,
-    'button-tertiary-border-active'             : 1px $border-style #282828,
-    'button-tertiary-border-disabled'           : inherit,
-    'button-tertiary-border-hover'              : 1px $border-style #292929,
-    'button-tertiary-border-pressed'            : 1px $border-style #5d83a7,
-    'button-tertiary-glyph-color'               : var(--button-glyph-color),
-    'button-tertiary-glyph-color-active'        : var(--button-glyph-color),
-    'button-tertiary-glyph-color-disabled'      : inherit,
-    'button-tertiary-glyph-color-hover'         : var(--button-glyph-color),
-    'button-tertiary-opacity-disabled'          : var(--neo-disabled-opacity),
-    'button-tertiary-ripple-background-color'   : inherit,
-    'button-tertiary-text-color'                : var(--button-text-color),
-    'button-tertiary-text-color-active'         : var(--button-text-color),
-    'button-tertiary-text-color-disabled'       : inherit,
-    'button-tertiary-text-color-hover'          : var(--button-text-color)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-button
-        --button-background-color                   : #{neo(button-background-color)};
-        --button-background-color-active            : #{neo(button-background-color-active)};
-        --button-background-color-disabled          : #{neo(button-background-color-disabled)};
-        --button-background-color-hover             : #{neo(button-background-color-hover)};
-        --button-background-image                   : #{neo(button-background-image)};
-        --button-background-gradient-end            : #{neo(button-background-gradient-end)};
-        --button-background-gradient-start          : #{neo(button-background-gradient-start)};
-        --button-badge-background-color             : #{neo(button-badge-background-color)};
-        --button-badge-color                        : #{neo(button-badge-color)};
-        --button-badge-margin-left                  : #{neo(button-badge-margin-left)};
-        --button-badge-margin-top                   : #{neo(button-badge-margin-top)};
-        --button-border                             : #{neo(button-border)};
-        --button-border-active                      : #{neo(button-border-active)};
-        --button-border-disabled                    : #{neo(button-border-disabled)};
-        --button-border-hover                       : #{neo(button-border-hover)};
-        --button-border-pressed                     : #{neo(button-border-pressed)};
-        --button-border-radius                      : #{neo(button-border-radius)};
-        --button-glyph-color                        : #{neo(button-glyph-color)};
-        --button-glyph-color-active                 : #{neo(button-glyph-color-active)};
-        --button-glyph-color-disabled               : #{neo(button-glyph-color-disabled)};
-        --button-glyph-color-hover                  : #{neo(button-glyph-color-hover)};
-        --button-height                             : #{neo(button-height)};
-        --button-margin                             : #{neo(button-margin)};
-        --button-opacity-disabled                   : #{neo(button-opacity-disabled)};
-        --button-outline-active                     : #{neo(button-outline-active)};
-        --button-padding                            : #{neo(button-padding)};
-        --button-ripple-background-color            : #{neo(button-ripple-background-color)};
-        --button-text-color                         : #{neo(button-text-color)};
-        --button-text-color-active                  : #{neo(button-text-color-active)};
-        --button-text-color-disabled                : #{neo(button-text-color-disabled)};
-        --button-text-color-hover                   : #{neo(button-text-color-hover)};
-        --button-text-font-family                   : #{neo(button-text-font-family)};
-        --button-text-font-size                     : #{neo(button-text-font-size)};
-        --button-text-font-weight                   : #{neo(button-text-font-weight)};
-        --button-text-line-height                   : #{neo(button-text-line-height)};
-        --button-text-transform                     : #{neo(button-text-transform)};
-        --button-use-gradients                      : #{neo(button-use-gradients)};
-
-        --button-ghost-background-color             : #{neo(button-ghost-background-color)};
-        --button-ghost-background-color-active      : #{neo(button-ghost-background-color-active)};
-        --button-ghost-background-color-disabled    : #{neo(button-ghost-background-color-disabled)};
-        --button-ghost-background-color-hover       : #{neo(button-ghost-background-color-hover)};
-        --button-ghost-background-image             : #{neo(button-ghost-background-image)};
-        --button-ghost-badge-background-color       : #{neo(button-ghost-badge-background-color)};
-        --button-ghost-badge-color                  : #{neo(button-ghost-badge-color)};
-        --button-ghost-border                       : #{neo(button-ghost-border)};
-        --button-ghost-border-active                : #{neo(button-ghost-border-active)};
-        --button-ghost-border-disabled              : #{neo(button-ghost-border-disabled)};
-        --button-ghost-border-hover                 : #{neo(button-ghost-border-hover)};
-        --button-ghost-border-pressed               : #{neo(button-ghost-border-pressed)};
-        --button-ghost-glyph-color                  : #{neo(button-ghost-glyph-color)};
-        --button-ghost-glyph-color-active           : #{neo(button-ghost-glyph-color-active)};
-        --button-ghost-glyph-color-disabled         : #{neo(button-ghost-glyph-color-disabled)};
-        --button-ghost-glyph-color-hover            : #{neo(button-ghost-glyph-color-hover)};
-        --button-ghost-opacity-disabled             : #{neo(button-ghost-opacity-disabled)};
-        --button-ghost-ripple-background-color      : #{neo(button-ghost-ripple-background-color)};
-        --button-ghost-text-color                   : #{neo(button-ghost-text-color)};
-        --button-ghost-text-color-active            : #{neo(button-ghost-text-color-active)};
-        --button-ghost-text-color-disabled          : #{neo(button-ghost-text-color-disabled)};
-        --button-ghost-text-color-hover             : #{neo(button-ghost-text-color-hover)};
-
-        --button-secondary-background-color         : #{neo(button-secondary-background-color)};
-        --button-secondary-background-color-active  : #{neo(button-secondary-background-color-active)};
-        --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
-        --button-secondary-background-color-hover   : #{neo(button-secondary-background-color-hover)};
-        --button-secondary-background-image         : #{neo(button-secondary-background-image)};
-        --button-secondary-badge-background-color   : #{neo(button-secondary-badge-background-color)};
-        --button-secondary-badge-color              : #{neo(button-secondary-badge-color)};
-        --button-secondary-border                   : #{neo(button-secondary-border)};
-        --button-secondary-border-active            : #{neo(button-secondary-border-active)};
-        --button-secondary-border-disabled          : #{neo(button-secondary-border-disabled)};
-        --button-secondary-border-hover             : #{neo(button-secondary-border-hover)};
-        --button-secondary-border-pressed           : #{neo(button-secondary-border-pressed)};
-        --button-secondary-glyph-color              : #{neo(button-secondary-glyph-color)};
-        --button-secondary-glyph-color-active       : #{neo(button-secondary-glyph-color-active)};
-        --button-secondary-glyph-color-disabled     : #{neo(button-secondary-glyph-color-disabled)};
-        --button-secondary-glyph-color-hover        : #{neo(button-secondary-glyph-color-hover)};
-        --button-secondary-opacity-disabled         : #{neo(button-secondary-opacity-disabled)};
-        --button-secondary-ripple-background-color  : #{neo(button-secondary-ripple-background-color)};
-        --button-secondary-text-color               : #{neo(button-secondary-text-color)};
-        --button-secondary-text-color-active        : #{neo(button-secondary-text-color-active)};
-        --button-secondary-text-color-disabled      : #{neo(button-secondary-text-color-disabled)};
-        --button-secondary-text-color-hover         : #{neo(button-secondary-text-color-hover)};
-
-        --button-tertiary-background-color          : #{neo(button-tertiary-background-color)};
-        --button-tertiary-background-color-active   : #{neo(button-tertiary-background-color-active)};
-        --button-tertiary-background-color-disabled : #{neo(button-tertiary-background-color-hover)};
-        --button-tertiary-background-color-hover    : #{neo(button-tertiary-background-color-hover)};
-        --button-tertiary-background-image          : #{neo(button-tertiary-background-image)};
-        --button-tertiary-badge-background-color    : #{neo(button-tertiary-badge-background-color)};
-        --button-tertiary-badge-color               : #{neo(button-tertiary-badge-color)};
-        --button-tertiary-border                    : #{neo(button-tertiary-border)};
-        --button-tertiary-border-active             : #{neo(button-tertiary-border-active)};
-        --button-tertiary-border-disabled           : #{neo(button-tertiary-border-disabled)};
-        --button-tertiary-border-hover              : #{neo(button-tertiary-border-hover)};
-        --button-tertiary-border-pressed            : #{neo(button-tertiary-border-pressed)};
-        --button-tertiary-glyph-color               : #{neo(button-tertiary-glyph-color)};
-        --button-tertiary-glyph-color-active        : #{neo(button-tertiary-glyph-color-active)};
-        --button-tertiary-glyph-color-disabled      : #{neo(button-tertiary-glyph-color-disabled)};
-        --button-tertiary-glyph-color-hover         : #{neo(button-tertiary-glyph-color-hover)};
-        --button-tertiary-opacity-disabled          : #{neo(button-tertiary-opacity-disabled)};
-        --button-tertiary-ripple-background-color   : #{neo(button-tertiary-ripple-background-color)};
-        --button-tertiary-text-color                : #{neo(button-tertiary-text-color)};
-        --button-tertiary-text-color-active         : #{neo(button-tertiary-text-color-active)};
-        --button-tertiary-text-color-disabled       : #{neo(button-tertiary-text-color-disabled)};
-        --button-tertiary-text-color-hover          : #{neo(button-tertiary-text-color-hover)};
-    }
+    // {module: Button, ui: --tertiary}
+    --button-tertiary-background-color          : transparent;
+    --button-tertiary-background-color-active   : #373a3c;
+    --button-tertiary-background-color-disabled : inherit;
+    --button-tertiary-background-color-hover    : var(--button-background-color-hover);
+    --button-tertiary-background-image          : none;
+    --button-tertiary-badge-background-color    : var(--button-badge-background-color);
+    --button-tertiary-badge-color               : var(--button-badge-color);
+    --button-tertiary-border                    : 1px #{$border-style} transparent;
+    --button-tertiary-border-active             : 1px #{$border-style} #282828;
+    --button-tertiary-border-disabled           : inherit;
+    --button-tertiary-border-hover              : 1px #{$border-style} #292929;
+    --button-tertiary-border-pressed            : 1px #{$border-style} #5d83a7;
+    --button-tertiary-glyph-color               : var(--button-glyph-color);
+    --button-tertiary-glyph-color-active        : var(--button-glyph-color);
+    --button-tertiary-glyph-color-disabled      : inherit;
+    --button-tertiary-glyph-color-hover         : var(--button-glyph-color);
+    --button-tertiary-opacity-disabled          : var(--neo-disabled-opacity);
+    --button-tertiary-ripple-background-color   : inherit;
+    --button-tertiary-text-color                : var(--button-text-color);
+    --button-tertiary-text-color-active         : var(--button-text-color);
+    --button-tertiary-text-color-disabled       : inherit;
+    --button-tertiary-text-color-hover          : var(--button-text-color);
 }

package/resources/scss/theme-dark/calendar/view/EditEventContainer.scss

@@ -1,13 +1,5 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-edit-event-background-color': #2b2b2b,
-    'calendar-edit-event-border-color'    : #64B5F6,
-    'calendar-edit-event-box-shadow'      : 0 5px 10px rgba(0,0,0,.4)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-edit-event-container
-        --calendar-edit-event-background-color: #{neo(calendar-edit-event-background-color)};
-        --calendar-edit-event-border-color    : #{neo(calendar-edit-event-border-color)};
-        --calendar-edit-event-box-shadow      : #{neo(calendar-edit-event-box-shadow)};
-    }
+:root .neo-theme-dark { // .neo-calendar-edit-event-container
+    --calendar-edit-event-background-color: #2b2b2b;
+    --calendar-edit-event-border-color    : #64B5F6;
+    --calendar-edit-event-box-shadow      : 0 5px 10px rgba(0,0,0,.4);
 }

package/resources/scss/theme-dark/calendar/view/MainContainer.scss

@@ -1,49 +1,23 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-border-color'              : #3c3f41,
-    'event-blue-background-color'        : rgba(104, 169, 217, 0.1),
-    'event-blue-background-color-focus'  : rgba(104, 169, 217, 0.6),
-    'event-blue-color'                   : rgb( 104, 169, 217),
-    'event-green-background-color'       : rgba(127, 255,   0, 0.1),
-    'event-green-background-color-focus' : rgba(127, 255,   0, 0.6),
-    'event-green-color'                  : rgb( 127, 255,   0),
-    'event-orange-background-color'      : rgba(255, 100,   0, 0.1),
-    'event-orange-background-color-focus': rgba(255, 100,   0, 0.6),
-    'event-orange-color'                 : rgb( 255, 100,   0),
-    'event-pink-background-color'        : rgba(255,  20, 147, 0.1),
-    'event-pink-background-color-focus'  : rgba(255,  20, 147, 0.6),
-    'event-pink-color'                   : rgb( 255,  20, 147),
-    'event-red-background-color'         : rgba(255,   0,   0, 0.1),
-    'event-red-background-color-focus'   : rgba(255,   0,   0, 0.6),
-    'event-red-color'                    : rgb( 255,   0,   0),
-    'event-yellow-background-color'      : rgba(255, 255,   0, 0.1),
-    'event-yellow-background-color-focus': rgba(255, 255,   0, 0.6),
-    'event-yellow-border-color'          : rgb( 255, 255,   0),
-    'event-yellow-color'                 : rgb( 255, 255,   0),
-    'event-yellow-color-focus'           : #fff
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-maincontainer
-        --calendar-border-color              : #{neo(calendar-border-color)};
-        --event-blue-background-color        : #{neo(event-blue-background-color)};
-        --event-blue-background-color-focus  : #{neo(event-blue-background-color-focus)};
-        --event-blue-color                   : #{neo(event-blue-color)};
-        --event-green-background-color       : #{neo(event-green-background-color)};
-        --event-green-background-color-focus : #{neo(event-green-background-color-focus)};
-        --event-green-color                  : #{neo(event-green-color)};
-        --event-orange-background-color      : #{neo(event-orange-background-color)};
-        --event-orange-background-color-focus: #{neo(event-orange-background-color-focus)};
-        --event-orange-color                 : #{neo(event-orange-color)};
-        --event-pink-background-color        : #{neo(event-pink-background-color)};
-        --event-pink-background-color-focus  : #{neo(event-pink-background-color-focus)};
-        --event-pink-color                   : #{neo(event-pink-color)};
-        --event-red-background-color         : #{neo(event-red-background-color)};
-        --event-red-background-color-focus   : #{neo(event-red-background-color-focus)};
-        --event-red-color                    : #{neo(event-red-color)};
-        --event-yellow-background-color      : #{neo(event-yellow-background-color)};
-        --event-yellow-background-color-focus: #{neo(event-yellow-background-color-focus)};
-        --event-yellow-border-color          : #{neo(event-yellow-border-color)};
-        --event-yellow-color                 : #{neo(event-yellow-color)};
-        --event-yellow-color-focus           : #{neo(event-yellow-color-focus)};
-    }
+:root .neo-theme-dark { // .neo-calendar-maincontainer
+    --calendar-border-color              : #3c3f41;
+    --event-blue-background-color        : rgba(104, 169, 217, 0.1);
+    --event-blue-background-color-focus  : rgba(104, 169, 217, 0.6);
+    --event-blue-color                   : rgb( 104, 169, 217);
+    --event-green-background-color       : rgba(127, 255,   0, 0.1);
+    --event-green-background-color-focus : rgba(127, 255,   0, 0.6);
+    --event-green-color                  : rgb( 127, 255,   0);
+    --event-orange-background-color      : rgba(255, 100,   0, 0.1);
+    --event-orange-background-color-focus: rgba(255, 100,   0, 0.6);
+    --event-orange-color                 : rgb( 255, 100,   0);
+    --event-pink-background-color        : rgba(255,  20, 147, 0.1);
+    --event-pink-background-color-focus  : rgba(255,  20, 147, 0.6);
+    --event-pink-color                   : rgb( 255,  20, 147);
+    --event-red-background-color         : rgba(255,   0,   0, 0.1);
+    --event-red-background-color-focus   : rgba(255,   0,   0, 0.6);
+    --event-red-color                    : rgb( 255,   0,   0);
+    --event-yellow-background-color      : rgba(255, 255,   0, 0.1);
+    --event-yellow-background-color-focus: rgba(255, 255,   0, 0.6);
+    --event-yellow-border-color          : rgb( 255, 255,   0);
+    --event-yellow-color                 : rgb( 255, 255,   0);
+    --event-yellow-color-focus           : #fff;
 }

package/resources/scss/theme-dark/calendar/view/SettingsContainer.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-settings-header-background-color': #33343d,
-    'calendar-settings-header-color'           : #ccc
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-settingscontainer
-        --calendar-settings-header-background-color: #{neo(calendar-settings-header-background-color)};
-        --calendar-settings-header-color           : #{neo(calendar-settings-header-color)};
-    }
-}
+:root .neo-theme-dark { // .neo-calendar-settingscontainer
+    --calendar-settings-header-background-color: #33343d;
+    --calendar-settings-header-color           : #ccc;
+}

package/resources/scss/theme-dark/calendar/view/YearComponent.scss

@@ -1,23 +1,10 @@
-$neoMap: map-merge($neoMap, (
-    'c-y-cell-border-color'     : #3c3f41,
-    'c-y-cell-color'            : #bbb,
-    'c-y-month-color'           : #ccc,
-    'c-y-today-background-color': firebrick,
-    'c-y-today-color'           : #fff,
-    'c-y-week-background-color' : #33343d,
-    'c-y-week-color'            : #ccc,
-    'c-y-year-color'            : #ccc
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-yearcomponent
-        --c-y-cell-border-color     : #{neo(c-y-cell-border-color)};
-        --c-y-cell-color            : #{neo(c-y-cell-color)};
-        --c-y-month-color           : #{neo(c-y-month-color)};
-        --c-y-today-background-color: #{neo(c-y-today-background-color)};
-        --c-y-today-color           : #{neo(c-y-today-color)};
-        --c-y-week-background-color : #{neo(c-y-week-background-color)};
-        --c-y-week-color            : #{neo(c-y-week-color)};
-        --c-y-year-color            : #{neo(c-y-year-color)};
-    }
-}
+:root .neo-theme-dark { // .neo-calendar-yearcomponent
+    --c-y-cell-border-color     : #3c3f41;
+    --c-y-cell-color            : #bbb;
+    --c-y-month-color           : #ccc;
+    --c-y-today-background-color: firebrick;
+    --c-y-today-color           : #fff;
+    --c-y-week-background-color : #33343d;
+    --c-y-week-color            : #ccc;
+    --c-y-year-color            : #ccc;
+}

package/resources/scss/theme-dark/calendar/view/calendars/EditContainer.scss

@@ -1,13 +1,5 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-edit-calendar-background-color': #2b2b2b,
-    'calendar-edit-calendar-border-color'    : #64B5F6,
-    'calendar-edit-calendar-box-shadow'      : 0 5px 10px rgba(0,0,0,.4)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-edit-container
-        --calendar-edit-calendar-background-color: #{neo(calendar-edit-calendar-background-color)};
-        --calendar-edit-calendar-border-color    : #{neo(calendar-edit-calendar-border-color)};
-        --calendar-edit-calendar-box-shadow      : #{neo(calendar-edit-calendar-box-shadow)};
-    }
+:root .neo-theme-dark { // .neo-calendar-edit-container
+    --calendar-edit-calendar-background-color: #2b2b2b;
+    --calendar-edit-calendar-border-color    : #64B5F6;
+    --calendar-edit-calendar-box-shadow      : 0 5px 10px rgba(0,0,0,.4);
 }

package/resources/scss/theme-dark/calendar/view/calendars/List.scss

@@ -1,9 +1,3 @@
-$neoMap: map-merge($neoMap, (
-    'calendars-list-edit-icon-color': #ccc
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendars-list
-        --calendars-list-edit-icon-color: #{neo(calendars-list-edit-icon-color)};
-    }
+:root .neo-theme-dark { // .neo-calendars-list
+    --calendars-list-edit-icon-color: #ccc;
 }

package/resources/scss/theme-dark/calendar/view/month/Component.scss

@@ -1,23 +1,10 @@
-$neoMap: map-merge($neoMap, (
-    'c-m-background-color'        : #2b2b2b,
-    'c-m-border-color'            : #3c3f41,
-    'c-m-day-name-color'          : #ccc,
-    'c-m-day-number-color'        : #bbb,
-    'c-m-month-name-color'        : #fff,
-    'c-m-scroll-box-shadow'       : '0 0 1.56em 0.78em #fff, 0 0 3.9em 1.95em #1c60a0',
-    'c-m-weekend-background-color': rgba(50, 50, 60, .35),
-    'c-m-year-color'              : #ccc
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-monthcomponent
-        --c-m-background-color        : #{neo(c-m-background-color)};
-        --c-m-border-color            : #{neo(c-m-border-color)};
-        --c-m-day-name-color          : #{neo(c-m-day-name-color)};
-        --c-m-day-number-color        : #{neo(c-m-day-number-color)};
-        --c-m-month-name-color        : #{neo(c-m-month-name-color)};
-        --c-m-scroll-box-shadow       : #{neo(c-m-scroll-box-shadow)};
-        --c-m-weekend-background-color: #{neo(c-m-weekend-background-color)};
-        --c-m-year-color              : #{neo(c-m-year-color)};
-    }
+:root .neo-theme-dark { // .neo-calendar-monthcomponent
+    --c-m-background-color        : #2b2b2b;
+    --c-m-border-color            : #3c3f41;
+    --c-m-day-name-color          : #ccc;
+    --c-m-day-number-color        : #bbb;
+    --c-m-month-name-color        : #fff;
+    --c-m-scroll-box-shadow       : 0 0 1.56em 0.78em #fff, 0 0 3.9em 1.95em #1c60a0;
+    --c-m-weekend-background-color: rgba(50, 50, 60, .35);
+    --c-m-year-color              : #ccc;
 }

package/resources/scss/theme-dark/calendar/view/week/Component.scss

@@ -1,29 +1,13 @@
-$neoMap: map-merge($neoMap, (
-    'c-w-background-color'                  : #2b2b2b,
-    'c-w-border-color'                      : #3c3f41,
-    'c-w-event-resizable-color'             : #64B5F6,
-    'c-w-header-background-color'           : #2b2b2b,
-    'c-w-header-date-background-color-hover': #33343d,
-    'c-w-header-date-color'                 : #999,
-    'c-w-header-date-color-hover'           : #999,
-    'c-w-header-day-color'                  : #999,
-    'c-w-header-today-background-color'     : firebrick,
-    'c-w-header-today-color'                : #fff,
-    'c-w-weekend-background-color'          : rgba(50, 50, 60, .35)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-calendar-weekcomponent
-        --c-w-background-color                  : #{neo(c-w-background-color)};
-        --c-w-border-color                      : #{neo(c-w-border-color)};
-        --c-w-event-resizable-color             : #{neo(c-w-event-resizable-color)};
-        --c-w-header-background-color           : #{neo(c-w-header-background-color)};
-        --c-w-header-date-background-color-hover: #{neo(c-w-header-date-background-color-hover)};
-        --c-w-header-date-color                 : #{neo(c-w-header-date-color)};
-        --c-w-header-date-color-hover           : #{neo(c-w-header-date-color-hover)};
-        --c-w-header-day-color                  : #{neo(c-w-header-day-color)};
-        --c-w-header-today-background-color     : #{neo(c-w-header-today-background-color)};
-        --c-w-header-today-color                : #{neo(c-w-header-today-color)};
-        --c-w-weekend-background-color          : #{neo(c-w-weekend-background-color)};
-    }
+:root .neo-theme-dark { // .neo-calendar-weekcomponent
+    --c-w-background-color                  : #2b2b2b;
+    --c-w-border-color                      : #3c3f41;
+    --c-w-event-resizable-color             : #64B5F6;
+    --c-w-header-background-color           : #2b2b2b;
+    --c-w-header-date-background-color-hover: #33343d;
+    --c-w-header-date-color                 : #999;
+    --c-w-header-date-color-hover           : #999;
+    --c-w-header-day-color                  : #999;
+    --c-w-header-today-background-color     : firebrick;
+    --c-w-header-today-color                : #fff;
+    --c-w-weekend-background-color          : rgba(50, 50, 60, .35);
 }