| Conditions | 1 |
| Paths | 1 |
| Total Lines | 101 |
| Code Lines | 68 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | <?php |
||
| 103 | public function getCSSVariables(): array { |
||
| 104 | $colorMainText = '#222222'; |
||
| 105 | $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); |
||
| 106 | $colorTextMaxcontrast = $this->util->lighten($colorMainText, 33); |
||
| 107 | $colorMainBackground = '#ffffff'; |
||
| 108 | $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
||
| 109 | $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
||
| 110 | $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
||
| 111 | |||
| 112 | $variables = [ |
||
| 113 | '--color-main-background' => $colorMainBackground, |
||
| 114 | '--color-main-background-rgb' => $colorMainBackgroundRGB, |
||
| 115 | '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
||
| 116 | '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
||
| 117 | '--filter-background-blur' => 'blur(25px)', |
||
| 118 | |||
| 119 | // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
||
| 120 | '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
||
| 121 | |||
| 122 | // used for different active/hover/focus/disabled states |
||
| 123 | '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
||
| 124 | '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
||
| 125 | '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
||
| 126 | |||
| 127 | '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
||
| 128 | '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
||
| 129 | |||
| 130 | // max contrast for WCAG compliance |
||
| 131 | '--color-main-text' => $colorMainText, |
||
| 132 | '--color-text-maxcontrast' => $colorTextMaxcontrast, |
||
| 133 | '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
||
| 134 | '--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7), |
||
| 135 | '--color-text-light' => $colorMainText, |
||
| 136 | '--color-text-lighter' => $this->util->lighten($colorMainText, 33), |
||
| 137 | |||
| 138 | '--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)', |
||
| 139 | |||
| 140 | // info/warning/success feedback colours |
||
| 141 | '--color-error' => '#e9322d', |
||
| 142 | '--color-error-rgb' => join(',', $this->util->hexToRGB('#e9322d')), |
||
| 143 | '--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60), |
||
| 144 | '--color-warning' => '#eca700', |
||
| 145 | '--color-warning-rgb' => join(',', $this->util->hexToRGB('#eca700')), |
||
| 146 | '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), |
||
| 147 | '--color-success' => '#46ba61', |
||
| 148 | '--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')), |
||
| 149 | '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), |
||
| 150 | |||
| 151 | // used for the icon loading animation |
||
| 152 | '--color-loading-light' => '#cccccc', |
||
| 153 | '--color-loading-dark' => '#444444', |
||
| 154 | |||
| 155 | '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
||
| 156 | '--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)", |
||
| 157 | |||
| 158 | '--color-border' => $this->util->darken($colorMainBackground, 7), |
||
| 159 | '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
||
| 160 | |||
| 161 | '--font-face' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", |
||
| 162 | '--default-font-size' => '15px', |
||
| 163 | |||
| 164 | // TODO: support "(prefers-reduced-motion)" |
||
| 165 | '--animation-quick' => '100ms', |
||
| 166 | '--animation-slow' => '300ms', |
||
| 167 | |||
| 168 | // Default variables -------------------------------------------- |
||
| 169 | '--border-radius' => '3px', |
||
| 170 | '--border-radius-large' => '10px', |
||
| 171 | // pill-style button, value is large so big buttons also have correct roundness |
||
| 172 | '--border-radius-pill' => '100px', |
||
| 173 | |||
| 174 | '--default-clickable-area' => '44px', |
||
| 175 | '--default-line-height' => '24px', |
||
| 176 | '--default-grid-baseline' => '4px', |
||
| 177 | |||
| 178 | // various structure data |
||
| 179 | '--header-height' => '50px', |
||
| 180 | '--navigation-width' => '300px', |
||
| 181 | '--sidebar-min-width' => '300px', |
||
| 182 | '--sidebar-max-width' => '500px', |
||
| 183 | '--list-min-width' => '200px', |
||
| 184 | '--list-max-width' => '300px', |
||
| 185 | '--header-menu-item-height' => '44px', |
||
| 186 | '--header-menu-profile-item-height' => '66px', |
||
| 187 | |||
| 188 | // mobile. Keep in sync with core/js/js.js |
||
| 189 | '--breakpoint-mobile' => '1024px', |
||
| 190 | '--background-invert-if-dark' => 'no', |
||
| 191 | '--background-invert-if-bright' => 'invert(100%)', |
||
| 192 | |||
| 193 | // Default last fallback values |
||
| 194 | '--image-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')", |
||
| 195 | '--color-background-plain' => $this->defaultPrimaryColor, |
||
| 196 | ]; |
||
| 197 | |||
| 198 | // Primary variables |
||
| 199 | $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
||
| 200 | $variables = array_merge($variables, $this->generateGlobalBackgroundVariables()); |
||
| 201 | $variables = array_merge($variables, $this->generateUserBackgroundVariables()); |
||
| 202 | |||
| 203 | return $variables; |
||
| 204 | } |
||
| 210 |