_variables.scss in alchemy_cms-7.3.0

- old
+ new

@@ -1,28 +1,29 @@
-$light-blue: #cddce5;
-$very-light-blue: lighten($light-blue, 12%);
-$blue: #2d5a8d;
-$dark-blue: darken($blue, 10%);
-$light-gray: #f7f7f7;
-$medium-gray: #efefef;
-$dark-gray: #666666;
-$very-dark-gray: #333;
-$dark-gray-blue: rgb(51, 59, 81);
-$light_yellow: #fbfbd8;
-$orange: #ffd77a;
-$dark-orange: #eca96e;
-$very-dark-orange: darken($dark-orange, 20%);
-$white: #fff;
+@import "alchemy/deprecated_variables";
 
-$text-color: rgba($dark-gray-blue, 0.8) !default;
-$muted-text-color: rgba($dark-gray-blue, 0.5) !default;
-$icon-color: rgba($dark-gray-blue, 0.75) !default;
-$linked-color: $orange !default;
-$anchor-color: $very-dark-orange !default;
+$light-blue: hsl(203deg, 32%, 85%);
+$very-light-blue: hsl(203deg, 32%, 97%);
+$blue: hsl(212deg, 52%, 36%);
+$dark-blue: hsl(212deg, 52%, 26%);
+$light-gray: hsl(0deg, 0%, 97%);
+$medium-gray: hsl(0deg, 0%, 94%);
+$dark-gray: hsl(0deg, 0%, 40%);
+$very-dark-gray: hsl(0deg, 0%, 20%);
+$light_yellow: hsl(60deg, 81%, 92%);
+$orange: hsl(42deg, 100%, 74%);
+$dark-orange: hsl(28deg, 77%, 68%);
+$very-dark-orange: hsl(28deg, 77%, 48%);
+$white: hsl(0deg, 0%, 100%);
 
-$body-background-color: $light-gray !default;
+$text-color: hsla(224deg, 23%, 26%, 0.8) !default;
+$muted-text-color: hsla(224deg, 23%, 26%, 0.5) !default;
+$icon-color: hsla(224deg, 23%, 26%, 0.75) !default;
+$linked-color: var(--color-orange_medium) !default;
+$anchor-color: var(--color-orange_very_dark) !default;
 
+$body-background-color: var(--color-grey_very_light) !default;
+
 $default-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
   "Lucida Sans", Verdana, Tahoma, sans-serif !default;
 $mono-font-family: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
   Terminal, monospace !default;
 $base-font-size: 12px !default;
@@ -33,55 +34,55 @@
 $default-padding: 4px !default;
 $default-margin: $default-padding !default;
 
 $dialog-header-height: 36px !default;
 $dialog-header-padding: 0 2 * $default-padding !default;
-$dialog-header-color: $dark-blue !default;
-$dialog-header-text-color: $white !default;
+$dialog-header-color: var(--color-blue_dark) !default;
+$dialog-header-text-color: var(--color-white) !default;
 $dialog-header-font-size: $default-font-size !default;
-$dialog-box-shadow: 0 8px 16px rgba(35, 35, 35, 0.5) !default;
-$dialog-overlay-color: rgb(100, 100, 100) !default;
+$dialog-box-shadow: 0 8px 16px hsla(0deg, 0%, 14%, 0.5) !default;
+$dialog-overlay-color: hsl(0deg, 0%, 39%) !default;
 $dialog-overlay-opacity: 0.4 !default;
-$dialog-background-color: $light-gray !default;
+$dialog-background-color: var(--color-grey_very_light) !default;
 
-$default-border-color: rgba(#afafaf, 0.5) !default;
-$border-inset-color: lighten($default-border-color, 10%) !default;
+$default-border-color: hsla(0deg, 0%, 69%, 0.5) !default;
+$border-inset-color: hsla(0deg, 0%, 79%, 0.5) !default;
 $default-border-width: 1px !default;
 $default-border-style: solid !default;
 $default-border: $default-border-width $default-border-style
   $default-border-color !default;
 $default-border-radius: 3px !default;
 
 $form-field-margin: $default-margin 0 !default;
 $form-field-height: 31px !default;
 $form-field-addon-width: 30px !default;
-$form-field-background-color: $white !default;
+$form-field-background-color: var(--color-white) !default;
 $form-field-border-width: $default-border-width !default;
 $form-field-border-style: $default-border-style !default;
 $form-field-border-color: $default-border-color $default-border-color
   $border-inset-color $border-inset-color !default;
-$form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
+$form-field-box-shadow: inset 0px 0 1px var(--color-grey_light) !default;
 $form-field-padding: $default-padding 2 * $default-padding !default;
 $form-field-font-size: $default-font-size !default;
 $form-field-line-height: 1.25 !default;
-$form-field-text-color: $text-color !default;
-$form-field-disabled-text-color: #888 !default;
-$form-field-disabled-bg-color: rgba($white, 0.5) !default;
+$form-field-text-color: var(--color-text) !default;
+$form-field-disabled-text-color: hsl(0deg, 0%, 53%) !default;
+$form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5) !default;
 
-$focus-color: rgba($dark-orange, 0.75) !default;
+$focus-color: hsla(28deg, 77%, 68%, 0.75) !default;
 
-$button-bg-color: $white !default;
+$button-bg-color: var(--color-white) !default;
 $button-hover-bg-color: transparent !default;
 $button-border-color: $default-border-color !default;
 $button-border-width: 1px !default;
 $button-border-radius: $default-border-radius !default;
-$button-text-color: $text-color !default;
+$button-text-color: var(--color-text) !default;
 $button-hover-border-color: $default-border-color !default;
-$button-focus-border-color: $dark-orange !default;
+$button-focus-border-color: var(--color-orange_dark) !default;
 $button-font-weight: 700 !default;
 $button-text-shadow: none !default;
-$button-box-shadow: 0px 1px 1px -1px #333 !default;
+$button-box-shadow: 0px 1px 1px -1px hsl(0deg, 0%, 20%) !default;
 $button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
 $button-padding: $default-padding 5 * $default-padding !default;
 $small-button-padding: 0.4em 0.8em !default;
 $button-margin: $form-field-margin !default;
 
@@ -91,105 +92,108 @@
 $icon-button-medium-height: 26px !default;
 $icon-button-small-width: 15px !default;
 $icon-button-small-height: 15px !default;
 
 $secondary-button-bg-color: transparent !default;
-$secondary-button-text-color: $text-color !default;
+$secondary-button-text-color: var(--color-text) !default;
 $secondary-button-border-color: $default-border-color !default;
 
-$linked-button-color: rgba($linked-color, 0.75) !default;
-$linked-border-color: darken($linked-color, 10%) !default;
+$linked-button-color: hsla(42deg, 100%, 74%, 0.75) !default;
+$linked-border-color: hsl(42deg, 100%, 64%) !default;
 
-$success_border_color: #9cc4a1 !default;
-$success_text_color: #2e5934 !default;
-$success_background_color: #e2efd3 !default;
+$success_border_color: hsl(127deg, 25%, 69%) !default;
+$success_text_color: hsl(128deg, 32%, 26%) !default;
+$success_background_color: hsl(88deg, 47%, 88%) !default;
 
-$info_border_color: #8392b5 !default;
-$info_text_color: #233772 !default;
-$info_background_color: #cadbf3 !default;
+$info_border_color: hsl(222deg, 25%, 61%) !default;
+$info_text_color: hsl(225deg, 53%, 29%) !default;
+$info_background_color: hsl(215deg, 63%, 87%) !default;
 
-$warning_border_color: #c4c19c !default;
-$warning_text_color: #726d23 !default;
-$warning_background_color: #f3f0c1 !default;
+$warning_border_color: hsl(55deg, 25%, 69%) !default;
+$warning_text_color: hsl(56deg, 53%, 29%) !default;
+$warning_background_color: hsl(56deg, 68%, 85%) !default;
 
-$error_border_color: #c49c9c !default;
-$error_text_color: #a23434 !default;
-$error_background_color: #efd3d3 !default;
+$error_border_color: hsl(0deg, 25%, 69%) !default;
+$error_text_color: hsl(0deg, 51%, 42%) !default;
+$error_background_color: hsl(0deg, 47%, 88%) !default;
 
-$hint-background-color: $light_yellow !default;
-$hint-text-color: #59543e !default;
+$hint-background-color: var(--color-yellow_light) !default;
+$hint-text-color: hsl(49deg, 18%, 30%) !default;
 
 $form-left-width: 35% !default;
 $form-right-width: 65% !default;
 
 $sitemap-line-height: 32px !default;
-$sitemap-page-background-color: rgba($white, 0.75) !default;
-$sitemap-page-hover-color: rgba($light_yellow, 0.5) !default;
-$sitemap-info-background-color: rgba($white, 0.5) !default;
-$sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
+$sitemap-page-background-color: hsla(0deg, 0%, 100%, 0.75) !default;
+$sitemap-page-hover-color: hsla(60deg, 81%, 92%, 0.5) !default;
+$sitemap-info-background-color: hsla(0deg, 0%, 100%, 0.5) !default;
+$sitemap-highlight-color: hsla(57deg, 100%, 82%, 0.5) !default;
 
 $main-menu-width: 150px !default;
 $collapsed-main-menu-width: 48px !default;
 $collapsed-main-menu-entry-max-width: 300px !default;
-$main-menu-bg-color: $dark-blue !default;
-$main-menu-active-bg-color: $dark-orange !default;
-$main-menu-active-text-color: $dark-blue !default;
-$main-menu-text-color: $white !default;
-$main-menu-icon-color: $white !default;
+$main-menu-bg-color: var(--color-blue_dark) !default;
+$main-menu-active-bg-color: var(--color-orange_dark) !default;
+$main-menu-active-text-color: var(--color-blue_dark) !default;
+$main-menu-text-color: var(--color-white) !default;
+$main-menu-icon-color: var(--color-white) !default;
 $main-menu-entry-max-width: 110px !default;
-$toolbar-bg-color: $medium-gray !default;
+$toolbar-bg-color: var(--color-grey_light) !default;
 $toolbar-height: 46px !default;
 $tab-bar-height: 51px !default;
 $element-toolbar-height: 37px !default;
 $header-height: 29px !default;
-$header-background: #d8d8d8 !default;
-$text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
+$header-background: hsl(0deg, 0%, 85%) !default;
+$text-shadow-light: hsla(0deg, 0%, 100%, 0.5) 0 0 4px !default;
 $transition-duration: 250ms !default;
 $transition-easing: linear !default;
 
-$tooltip-background-color: $dark-blue !default;
+$tooltip-background-color: var(--color-blue_dark) !default;
 
 $addon-icon-opacity: 0.85 !default;
 
-$table-row-even-background-color: $white !default;
-$table-row-odd-background-color: rgba($white, 0.5) !default;
-$table-row-hover-color: rgba($light_yellow, 0.5) !default;
+$table-row-even-background-color: var(--color-white) !default;
+$table-row-odd-background-color: hsla(0deg, 0%, 100%, 0.5) !default;
+$table-row-hover-color: hsla(60deg, 81%, 92%, 0.5) !default;
 
 $elements-window-width: 22.5vw !default;
 $elements-window-min-width: 400px !default;
 $element-header-bg-color: transparent !default;
-$element-header-active-bg-color: $dark-blue !default;
-$element-header-active-color: $white !default;
-$element-header-deprecated-bg-color: rgba(253, 213, 175, 0.25) !default;
-$element-deprecated-border-color: rgb(253, 213, 175) !default;
+$element-header-active-bg-color: var(--color-blue_dark) !default;
+$element-header-active-color: var(--color-white) !default;
+$element-header-deprecated-bg-color: hsla(29deg, 95%, 84%, 0.25) !default;
+$element-deprecated-border-color: hsl(29deg, 95%, 84%) !default;
 $top-menu-height: 75px !default;
 
 $tabs-height: 31px !default;
 $pagination-height: 52px !default;
 
-$datepicker_current_bg: $blue !default;
-$datepicker_current_color: $white !default;
+$datepicker_current_bg: var(--color-blue_medium) !default;
+$datepicker_current_color: var(--color-white) !default;
 $datepicker_current_box_shadow: none !default;
-$datepicker_hover_bg: $light_yellow !default;
-$datepicker_hover_color: $text-color !default;
-$datepicker_today_bg: $medium-gray !default;
-$datepicker_today_color: $blue !default;
-$datepicker_header_color: $text-color !default;
-$datepicker_day_bg: $light-gray !default;
-$datepicker_day_border: 1px solid $medium-gray !default;
-$datepicker_day_color: $text-color !default;
+$datepicker_hover_bg: var(--color-yellow_light) !default;
+$datepicker_hover_color: var(--color-text) !default;
+$datepicker_today_bg: var(--color-grey_light) !default;
+$datepicker_today_color: var(--color-blue_medium) !default;
+$datepicker_header_color: var(--color-text) !default;
+$datepicker_day_bg: var(--color-grey_very_light) !default;
+$datepicker_day_border: 1px solid var(--color-grey_light) !default;
+$datepicker_day_color: var(--color-text) !default;
 
-$select-hover-bg-color: $dark-blue !default;
-$select-hover-text-color: $white !default;
+$select-hover-bg-color: var(--color-blue_dark) !default;
+$select-hover-text-color: var(--color-white) !default;
 $medium-select-box-width: 90px;
 $large-select-box-width: 120px;
 
 $thumbnail-background:
-  linear-gradient(45deg, $medium-gray 25%, transparent 25%) 0.5em 0.5em/1em 1em,
-  linear-gradient(-45deg, $medium-gray 25%, transparent 25%) -0.5em 0/1em 1em,
-  linear-gradient(45deg, transparent 75%, $medium-gray 75%) 0 0/1em 1em,
-  linear-gradient(-45deg, transparent 75%, $medium-gray 75%) 0 0.5em/1em 1em
-    $white !default;
+  linear-gradient(45deg, var(--color-grey_light) 25%, transparent 25%) 0.5em
+    0.5em/1em 1em,
+  linear-gradient(-45deg, var(--color-grey_light) 25%, transparent 25%) -0.5em 0/1em
+    1em,
+  linear-gradient(45deg, transparent 75%, var(--color-grey_light) 75%) 0 0/1em
+    1em,
+  linear-gradient(-45deg, transparent 75%, var(--color-grey_light) 75%) 0 0.5em/1em
+    1em var(--color-white) !default;
 
 $small-screen-break-point: 500px;
 $medium-screen-break-point: 700px;
 $large-screen-break-point: 1000px;
 $xlarge-screen-break-point: 1440px;