neo.mjs 5.18.0 → 6.0.0

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

@@ -4,225 +4,114 @@ $border-style    : solid;
 $border-width    : 1px;
 $text-color      : #1c60a0;
 
-$neoMap: map-merge($neoMap, (
-    'button-background-color'                   : $background-color,
-    'button-background-color-active'            : #ddd,
-    'button-background-color-disabled'          : $background-color,
-    'button-background-color-hover'             : $background-color,
-    'button-background-image'                   : none,
-    'button-background-gradient-end'            : #323536,
-    'button-background-gradient-start'          : #434749,
-    'button-badge-background-color'             : $text-color,
-    'button-badge-color'                        : $background-color,
-    'button-badge-margin-left'                  : -10px,
-    'button-badge-margin-top'                   : -10px,
-    'button-border'                             : $border-width $border-style $border-color,
-    'button-border-active'                      : $border-width $border-style $text-color,
-    'button-border-disabled'                    : $border-width $border-style $border-color,
-    'button-border-hover'                       : $border-width $border-style $text-color,
-    'button-border-pressed'                     : $border-width $border-style $text-color,
-    'button-border-radius'                      : 3px,
-    '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'            : lighten($text-color, 50%),
-    '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'                     : uppercase,
-    'button-use-gradients'                      : false,
+:root .neo-theme-light { // .neo-button
+    --button-background-color                   : #{$background-color};
+    --button-background-color-active            : #ddd;
+    --button-background-color-disabled          : #{$background-color};
+    --button-background-color-hover             : #{$background-color};
+    --button-background-image                   : none;
+    --button-background-gradient-end            : #323536;
+    --button-background-gradient-start          : #434749;
+    --button-badge-background-color             : #{$text-color};
+    --button-badge-color                        : #{$background-color};
+    --button-badge-margin-left                  : -10px;
+    --button-badge-margin-top                   : -10px;
+    --button-border                             : #{$border-width} #{$border-style} #{$border-color};
+    --button-border-active                      : #{$border-width} #{$border-style} #{$text-color};
+    --button-border-disabled                    : #{$border-width} #{$border-style} #{$border-color};
+    --button-border-hover                       : #{$border-width} #{$border-style} #{$text-color};
+    --button-border-pressed                     : #{$border-width} #{$border-style} #{$text-color};
+    --button-border-radius                      : 3px;
+    --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            : #{lighten($text-color, 50%)};
+    --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                     : uppercase;
+    --button-use-gradients                      : false;
 
-    // {module: Button, ui: 'ghost'}
-    'button-ghost-background-color'             : var(--button-text-color),
-    'button-ghost-background-color-active'      : $border-color,
-    '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'                       : $border-width $border-style var(--button-background-color),
-    'button-ghost-border-active'                : $border-width $border-style $border-color,
-    'button-ghost-border-disabled'              : inherit,
-    'button-ghost-border-hover'                 : $border-width $border-style $text-color,
-    'button-ghost-border-pressed'               : $border-width $border-style $text-color,
-    '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      : #{$border-color};
+    --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                       : #{$border-width} #{$border-style} var(--button-background-color);
+    --button-ghost-border-active                : #{$border-width} #{$border-style} #{$border-color};
+    --button-ghost-border-disabled              : inherit;
+    --button-ghost-border-hover                 : #{$border-width} #{$border-style} #{$text-color};
+    --button-ghost-border-pressed               : #{$border-width} #{$border-style} #{$text-color};
+    --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'  : $border-color,
-    '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'                   : $border-width $border-style var(--button-background-color),
-    'button-secondary-border-active'            : $border-width $border-style $border-color,
-    'button-secondary-border-disabled'          : inherit,
-    'button-secondary-border-hover'             : $border-width $border-style $text-color,
-    'button-secondary-border-pressed'           : $border-width $border-style $text-color,
-    '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  : #{$border-color};
+    --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                   : #{$border-width} #{$border-style} var(--button-background-color);
+    --button-secondary-border-active            : #{$border-width} #{$border-style} #{$border-color};
+    --button-secondary-border-disabled          : inherit;
+    --button-secondary-border-hover             : #{$border-width} #{$border-style} #{$text-color};
+    --button-secondary-border-pressed           : #{$border-width} #{$border-style} #{$text-color};
+    --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'   : $border-color,
-    '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'                    : $border-width $border-style transparent,
-    'button-tertiary-border-active'             : $border-width $border-style $border-color,
-    'button-tertiary-border-disabled'           : inherit,
-    'button-tertiary-border-hover'              : $border-width $border-style $text-color,
-    'button-tertiary-border-pressed'            : $border-width $border-style $text-color,
-    '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-light { // .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   : #{$border-color};
+    --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                    : #{$border-width} #{$border-style} transparent;
+    --button-tertiary-border-active             : #{$border-width} #{$border-style} #{$border-color};
+    --button-tertiary-border-disabled           : inherit;
+    --button-tertiary-border-hover              : #{$border-width} #{$border-style} #{$text-color};
+    --button-tertiary-border-pressed            : #{$border-width} #{$border-style} #{$text-color};
+    --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-light/calendar/view/EditEventContainer.scss

@@ -1,13 +1,5 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-edit-event-background-color': #fff,
-    'calendar-edit-event-border-color'    : #1c60a0,
-    'calendar-edit-event-box-shadow'      : 0 5px 10px rgba(0,0,0,.4)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-edit-event-container
+    --calendar-edit-event-background-color: #fff;
+    --calendar-edit-event-border-color    : #1c60a0;
+    --calendar-edit-event-box-shadow      : 0 5px 10px rgba(0,0,0,.4);
 }

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

@@ -1,49 +1,23 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-border-color'              : #ddd,
-    'event-blue-background-color'        : rgba(  0,  80, 181, 0.1),
-    'event-blue-background-color-focus'  : rgba(  0,  80, 181, 0.6),
-    'event-blue-color'                   : rgb(   0,  80, 181),
-    'event-green-background-color'       : rgba(  0, 128,   0, 0.1),
-    'event-green-background-color-focus' : rgba(  0, 128,   0, 0.6),
-    'event-green-color'                  : rgb(   0, 128,   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, 204,   0, 0.1),
-    'event-yellow-background-color-focus': rgba(255, 204,   0, 0.6),
-    'event-yellow-border-color'          : rgb( 255, 204,   0),
-    'event-yellow-color'                 : rgb( 170, 170,   0),
-    'event-yellow-color-focus'           : rgb( 170, 170,   0)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-maincontainer
+    --calendar-border-color              : #ddd;
+    --event-blue-background-color        : rgba(  0,  80, 181, 0.1);
+    --event-blue-background-color-focus  : rgba(  0,  80, 181, 0.6);
+    --event-blue-color                   : rgb(   0,  80, 181);
+    --event-green-background-color       : rgba(  0, 128,   0, 0.1);
+    --event-green-background-color-focus : rgba(  0, 128,   0, 0.6);
+    --event-green-color                  : rgb(   0, 128,   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, 204,   0, 0.1);
+    --event-yellow-background-color-focus: rgba(255, 204,   0, 0.6);
+    --event-yellow-border-color          : rgb( 255, 204,   0);
+    --event-yellow-color                 : rgb( 170, 170,   0);
+    --event-yellow-color-focus           : rgb( 170, 170,   0);
 }

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

@@ -1,11 +1,3 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-settings-header-background-color': #f2f2f2,
-    'calendar-settings-header-color'           : #1c60a0
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-settingscontainer
+    --calendar-settings-header-background-color: #f2f2f2;
+}

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

@@ -1,23 +1,10 @@
-$neoMap: map-merge($neoMap, (
-    'c-y-cell-border-color'     : #ddd,
-    'c-y-cell-color'            : #555,
-    'c-y-month-color'           : #555,
-    'c-y-today-background-color': red,
-    'c-y-today-color'           : #fff,
-    'c-y-week-background-color' : #f2f2f2,
-    'c-y-week-color'            : #555,
-    'c-y-year-color'            : #1c60a0
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-yearcomponent
+    --c-y-cell-border-color     : #ddd;
+    --c-y-cell-color            : #555;
+    --c-y-month-color           : #555;
+    --c-y-today-background-color: red;
+    --c-y-today-color           : #fff;
+    --c-y-week-background-color : #f2f2f2;
+    --c-y-week-color            : #555;
+    --c-y-year-color            : #1c60a0;
+}

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

@@ -1,13 +1,5 @@
-$neoMap: map-merge($neoMap, (
-    'calendar-edit-calendar-background-color': #fff,
-    'calendar-edit-calendar-border-color'    : #1c60a0,
-    'calendar-edit-calendar-box-shadow'      : 0 5px 10px rgba(0,0,0,.4)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-edit-container
+    --calendar-edit-calendar-background-color: #fff;
+    --calendar-edit-calendar-border-color    : #1c60a0;
+    --calendar-edit-calendar-box-shadow      : 0 5px 10px rgba(0,0,0,.4);
 }

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

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

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

@@ -1,23 +1,10 @@
-$neoMap: map-merge($neoMap, (
-    'c-m-background-color'        : #fff,
-    'c-m-border-color'            : #ddd,
-    'c-m-day-name-color'          : #666,
-    'c-m-day-number-color'        : #666,
-    'c-m-month-name-color'        : #444,
-    '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(240, 240, 240, .35),
-    'c-m-year-color'              : #1c60a0
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-monthcomponent
+    --c-m-background-color        : #fff;
+    --c-m-border-color            : #ddd;
+    --c-m-day-name-color          : #666;
+    --c-m-day-number-color        : #666;
+    --c-m-month-name-color        : #444;
+    --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(240, 240, 240, .35);
+    --c-m-year-color              : #1c60a0;
+}

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

@@ -1,29 +1,13 @@
-$neoMap: map-merge($neoMap, (
-    'c-w-background-color'                  : #fff,
-    'c-w-border-color'                      : #ddd,
-    'c-w-event-resizable-color'             : #1c60a0,
-    'c-w-header-background-color'           : #fff,
-    'c-w-header-date-background-color-hover': #eee,
-    'c-w-header-date-color'                 : #666,
-    'c-w-header-date-color-hover'           : #666,
-    'c-w-header-day-color'                  : #666,
-    'c-w-header-today-background-color'     : red,
-    'c-w-header-today-color'                : #fff,
-    'c-w-weekend-background-color'          : rgba(240, 240, 240, .35)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .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-light { // .neo-calendar-weekcomponent
+    --c-w-background-color                  : #fff;
+    --c-w-border-color                      : #ddd;
+    --c-w-event-resizable-color             : #1c60a0;
+    --c-w-header-background-color           : #fff;
+    --c-w-header-date-background-color-hover: #eee;
+    --c-w-header-date-color                 : #666;
+    --c-w-header-date-color-hover           : #666;
+    --c-w-header-day-color                  : #666;
+    --c-w-header-today-background-color     : red;
+    --c-w-header-today-color                : #fff;
+    --c-w-weekend-background-color          : rgba(240, 240, 240, .35);
 }