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 |