packages/styles/scss/base/custom-properties/_optionals.scss

   1 /*
   2  * List of optional variables
   3  * An optional variable has always a defined fallback value
   4  */
   5
   6 /* prettier-ignore */
   7 :root,
   8 .ui-standard,
   9 .ui-prominent {
  10         /*
  11          * Generate 'optional' css variables from
  12          * variable-name: default-value
  13          *
  14          * Output
  15          * --variable-name: var(--optional-variable-name, default-value);
  16          *
  17          * Example
  18          * --link-norm: var(--optional-link-norm, var(--interaction-norm));
  19          */
  20
  21         @each $variable, $default in (
  22
  23                 link-norm  : var(--interaction-norm),
  24                 link-hover : var(--interaction-norm-hover),
  25                 link-active: var(--interaction-norm-active),
  26
  27                 selection-background-color: var(--primary),
  28                 selection-text-color      : var(--primary-contrast),
  29
  30                 header-background-color : var(--background-norm),
  31                 sidebar-background-color: var(--background-norm),
  32
  33                 navigation-current-item-marker-color    : var(--interaction-norm),
  34                 navigation-current-item-background-color: var(--interaction-default-hover),
  35                 navigation-current-item-text-color      : var(--text-norm),
  36
  37                 main-box-shadow  : none,
  38                 main-border-width: 1px,
  39
  40                 navigation-item-count-background-color: var(--primary),
  41                 navigation-item-count-text-color      : var(--primary-contrast),
  42
  43                 toolbar-background-color   : var(--background-norm),
  44                 toolbar-border-bottom-color: var(--border-weak),
  45                 toolbar-text-color         : var(--text-norm),
  46                 toolbar-separator-color    : var(--border-norm),
  47
  48                 scrollbar-thumb-color      : rgba(grey, 0.25),
  49
  50                 tooltip-background-color: var(--background-invert),
  51                 tooltip-text-color      : var(--text-invert),
  52
  53                 background-elevated     : var(--background-norm),
  54                 background-lowered      : var(--background-weak),
  55
  56                 email-item-unread-background-color     : var(--background-elevated),
  57                 email-item-unread-text-color           : var(--text-norm),
  58                 email-item-unread-icon-background-color: var(--background-strong),
  59                 email-item-unread-icon-text-color      : inherit,
  60
  61                 email-item-read-background-color     : var(--background-lowered),
  62                 email-item-read-text-color           : var(--text-norm),
  63                 email-item-read-icon-background-color: var(--background-strong),
  64                 email-item-read-icon-text-color      : inherit,
  65
  66                 email-item-selected-background-color     : var(--interaction-norm),
  67                 email-item-selected-text-color           : var(--interaction-norm-contrast),
  68                 email-item-selected-icon-background-color: var(--interaction-norm-major-2),
  69                 email-item-selected-icon-text-color      : inherit,
  70
  71                 email-message-view-background-color: var(--background-norm),
  72                 email-message-view-comfort-background-color: var(--background-norm),
  73
  74                 field-background-color : var(--background-norm),
  75                 field-text-color       : var(--text-norm),
  76                 field-placeholder-color: var(--text-hint),
  77
  78                 field-hover-background-color: var(--background-norm),
  79                 field-hover-text-color      : var(--text-norm),
  80
  81                 field-focus-background-color: var(--background-norm),
  82                 field-focus-text-color      : var(--text-norm),
  83
  84                 field-disabled-background-color: var(--background-norm),
  85                 field-disabled-text-color      : var(--text-disabled),
  86
  87                 select-background-color: var(--field-background-color),
  88
  89                 favorite-icon-color: orange,
  90
  91                 mark-background-color: yellow,
  92                 mark-text-color      : black,
  93                 mark-font-weight     : var(--font-weight-normal, normal),
  94
  95                 modal-background-color: var(--background-norm),
  96                 modal-text-color      : var(--text-norm),
  97
  98                 file-preview-text-color      : var(--text-norm),
  99                 file-preview-background-color: var(--background-norm),
 100
 101                 mini-calendar-today-color: var(--primary),
 102
 103                 border-radius: 8,
 104
 105                 shadow-default-color: 0 0 0,
 106                 shadow-norm-offset: 0 calc(var(--1px)) calc(var(--1px) * 4),
 107                 shadow-raised-offset: 0 calc(var(--1px) * 4) calc(var(--1px) * 12),
 108                 shadow-lifted-offset: 0 calc(var(--1px) * 8) calc(var(--1px) * 24),
 109
 110                 logo-text-proton-color : var(--text-norm),
 111                 logo-text-product-color: var(--primary),
 112
 113                 promotion-text-color: #15006F,
 114                 promotion-text-weak: #50409b,
 115                 promotion-interaction-hover: rgb(109 74 255 / 0.08),
 116                 promotion-background-start: rgb(109 74 255 / 0.15),
 117                 promotion-background-end: rgb(70 26 255 / 0.04),
 118
 119                 input-background-color: var(--background-norm),
 120
 121                 sidebar-item-selected-background-color: var(--interaction-weak),
 122         ) {
 123                 // --link-norm: var(--optional-link-norm, var(--interaction-norm));
 124                 --#{$variable}: var(--optional-#{$variable}, #{$default});
 125         }
 126 }