@baloise/ds-styles 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bin/index.mjs +289 -46
  2. package/css/all.css +1 -1
  3. package/css/all.css.map +1 -1
  4. package/css/baloise-design-system.css +1 -1
  5. package/css/baloise-design-system.css.map +1 -1
  6. package/css/core.css +1 -1
  7. package/css/core.css.map +1 -1
  8. package/css/utilities/grid.css.map +1 -1
  9. package/package.json +4 -4
  10. package/src/mixins/general.mixin.sass +11 -0
package/bin/index.mjs CHANGED
@@ -176,17 +176,20 @@ const main = async () => {
176
176
  async function migrateComponentStylesSheet({ log, isDirectory, directoryPath, filePath }) {
177
177
  const files = []
178
178
  if (isDirectory) {
179
- files.push(path.join(directoryPath, '**', '*.sass').replace(/\\/g, '/'))
180
- files.push(path.join(directoryPath, '**', '*.scss').replace(/\\/g, '/'))
179
+ const relativePath = path.relative(process.cwd(), directoryPath)
180
+ files.push(path.join(relativePath, '**', '*.scss').replace(/\\/g, '/'))
181
+ files.push(path.join(relativePath, '**', '*.sass').replace(/\\/g, '/'))
181
182
  } else {
182
- files.push(filePath.replace(/\\/g, '/'))
183
+ const relativePath = path.relative(process.cwd(), filePath)
184
+ files.push(relativePath.replace(/\\/g, '/'))
183
185
  }
184
186
 
185
187
  try {
186
188
  const result = await replace({
187
189
  files,
188
- from: [new RegExp(`@baloise/design-system-css/sass/mixins`, 'g')],
189
- to: ['@baloise/design-system-styles/sass/mixins'],
190
+ from: [new RegExp(`@baloise/(ds-css|design-system-css)/sass/mixins`, 'g')],
191
+ to: ['@baloise/ds-styles/sass/mixins'],
192
+ allowEmptyPaths: true,
190
193
  })
191
194
  printResult({ result, log })
192
195
  } catch (error) {
@@ -201,10 +204,12 @@ async function migrateComponentStylesSheet({ log, isDirectory, directoryPath, fi
201
204
  async function migrateCSSVariables({ log, isDirectory, directoryPath, filePath }) {
202
205
  const files = []
203
206
  if (isDirectory) {
204
- files.push(path.join(directoryPath, '**', '*.sass').replace(/\\/g, '/'))
205
- files.push(path.join(directoryPath, '**', '*.scss').replace(/\\/g, '/'))
207
+ const relativePath = path.relative(process.cwd(), directoryPath)
208
+ files.push(path.join(relativePath, '**', '*.sass').replace(/\\/g, '/'))
209
+ files.push(path.join(relativePath, '**', '*.scss').replace(/\\/g, '/'))
206
210
  } else {
207
- files.push(filePath.replace(/\\/g, '/'))
211
+ const relativePath = path.relative(process.cwd(), filePath)
212
+ files.push(relativePath.replace(/\\/g, '/'))
208
213
  }
209
214
 
210
215
  try {
@@ -215,13 +220,18 @@ async function migrateCSSVariables({ log, isDirectory, directoryPath, filePath }
215
220
  ...replacementsCSSVariablesVarious.from,
216
221
  ...replacementsCSSVariablesSpace.from,
217
222
  ...replacementsCSSVariablesTextSize.from,
223
+ ...replacementsCSSVariablesInvertedWhite.from,
224
+ ...replacementsCSSVariablesInvertedPrimary.from,
218
225
  ],
219
226
  to: [
220
227
  ...replacementsCSSVariablesColors.to,
221
228
  ...replacementsCSSVariablesVarious.to,
222
229
  ...replacementsCSSVariablesSpace.to,
223
230
  ...replacementsCSSVariablesTextSize.to,
231
+ ...replacementsCSSVariablesInvertedWhite.to,
232
+ ...replacementsCSSVariablesInvertedPrimary.to,
224
233
  ],
234
+ allowEmptyPaths: true,
225
235
  })
226
236
  printResult({ result, log })
227
237
  } catch (error) {
@@ -239,56 +249,57 @@ async function migrateGlobalStyleSheet({ globalStyleSheetPath, log }) {
239
249
  const result = await replace({
240
250
  files,
241
251
  from: [
242
- new RegExp(`@baloise/design-system-css/(sass|css)/baloise-design-system.sass`, 'g'),
243
- new RegExp(`@baloise/design-system-css/(sass|css)/baloise-design-system`, 'g'),
252
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/baloise-design-system.sass`, 'g'),
253
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/baloise-design-system`, 'g'),
244
254
 
245
- new RegExp(`@baloise/design-system-css/sass/mixins`, 'g'),
246
- new RegExp(`@baloise/design-system-css/(sass|css)/normalize`, 'g'),
247
- new RegExp(`@baloise/design-system-css/(sass|css)/structure`, 'g'),
248
- new RegExp(`@baloise/design-system-css/(sass|css)/font`, 'g'),
249
- new RegExp(`@baloise/design-system-css/(sass|css)/core`, 'g'),
255
+ new RegExp(`@baloise/(ds-css|design-system-css)/sass/mixins`, 'g'),
256
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/normalize`, 'g'),
257
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/structure`, 'g'),
258
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/font`, 'g'),
259
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/core`, 'g'),
250
260
 
251
261
  `// Deprecated styles will be removed with the next breaking version (optional)`,
252
- new RegExp(`@import '@baloise/design-system-css/(sass|css)/legacy';`, 'g'), // deprecated
253
- new RegExp(`@import '@baloise/design-system-css/(sass|css)/grid';`, 'g'), // included in core
254
-
255
- new RegExp(`@baloise/design-system-css/(sass|css)/display`, 'g'),
256
- new RegExp(`@baloise/design-system-css/(sass|css)/flex`, 'g'),
257
- new RegExp(`@baloise/design-system-css/(sass|css)/spacing`, 'g'),
258
- new RegExp(`@baloise/design-system-css/(sass|css)/typography`, 'g'),
259
- new RegExp(`@baloise/design-system-css/(sass|css)/color`, 'g'),
260
- new RegExp(`@baloise/design-system-css/(sass|css)/border`, 'g'),
261
- new RegExp(`@baloise/design-system-css/(sass|css)/radius`, 'g'),
262
- new RegExp(`@baloise/design-system-css/(sass|css)/opacity`, 'g'),
263
- new RegExp(`@baloise/design-system-css/(sass|css)/shadow`, 'g'),
262
+ new RegExp(`@import '@baloise/(ds-css|design-system-css)/(sass|css)/legacy';`, 'g'), // deprecated
263
+ new RegExp(`@import '@baloise/(ds-css|design-system-css)/(sass|css)/grid';`, 'g'), // included in core
264
+
265
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/display`, 'g'),
266
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/flex`, 'g'),
267
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/spacing`, 'g'),
268
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/typography`, 'g'),
269
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/color`, 'g'),
270
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/border`, 'g'),
271
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/radius`, 'g'),
272
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/opacity`, 'g'),
273
+ new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/shadow`, 'g'),
264
274
  ],
265
275
  to: [
266
- '@baloise/design-system-styles/sass/all',
267
- '@baloise/design-system-styles/sass/all',
268
-
269
- '@baloise/design-system-styles/sass/mixins',
270
- '@baloise/design-system-styles/css/normalize',
271
- '@baloise/design-system-styles/css/structure',
272
- '@baloise/design-system-styles/css/font',
273
- '@baloise/design-system-styles/css/core',
276
+ '@baloise/ds-styles/sass/all',
277
+ '@baloise/ds-styles/sass/all',
278
+
279
+ '@baloise/ds-styles/sass/mixins',
280
+ '@baloise/ds-styles/css/normalize',
281
+ '@baloise/ds-styles/css/structure',
282
+ '@baloise/ds-styles/css/font',
283
+ '@baloise/ds-styles/css/core',
274
284
  '',
275
285
  '',
276
286
  '',
277
- '@baloise/design-system-styles/css/utilities/layout',
278
- '@baloise/design-system-styles/css/utilities/flex',
279
- '@baloise/design-system-styles/css/utilities/spacing',
280
- '@baloise/design-system-styles/css/utilities/typography',
281
- '@baloise/design-system-styles/css/utilities/background',
282
- '@baloise/design-system-styles/css/utilities/border',
283
- '@baloise/design-system-styles/css/utilities/border',
284
- '@baloise/design-system-styles/css/utilities/elevation',
285
- '@baloise/design-system-styles/css/utilities/elevation',
287
+ '@baloise/ds-styles/css/utilities/layout',
288
+ '@baloise/ds-styles/css/utilities/flex',
289
+ '@baloise/ds-styles/css/utilities/spacing',
290
+ '@baloise/ds-styles/css/utilities/typography',
291
+ '@baloise/ds-styles/css/utilities/background',
292
+ '@baloise/ds-styles/css/utilities/border',
293
+ '@baloise/ds-styles/css/utilities/border',
294
+ '@baloise/ds-styles/css/utilities/elevation',
295
+ '@baloise/ds-styles/css/utilities/elevation',
286
296
  ],
297
+ allowEmptyPaths: true,
287
298
  })
288
299
  printResult({ result, log })
289
300
  let lines = (await fsp.readFile(files, 'utf-8')).split(/\r?\n/)
290
- lines.push(`@import '@baloise/design-system-styles/css/utilities/interaction';`)
291
- lines.push(`@import '@baloise/design-system-styles/css/utilities/sizing';`)
301
+ lines.push(`@import '@baloise/ds-styles/css/utilities/interaction';`)
302
+ lines.push(`@import '@baloise/ds-styles/css/utilities/sizing';`)
292
303
  lines = lines.reduce((acc, line) => {
293
304
  if (line.length === 0) {
294
305
  if (acc[acc.length - 1].length === 0) {
@@ -390,6 +401,7 @@ async function migrateHtmlFiles({ filePath, log, utilReplacers }) {
390
401
 
391
402
  return content
392
403
  },
404
+ allowEmptyPaths: true,
393
405
  }),
394
406
  ]
395
407
 
@@ -837,6 +849,47 @@ const textSizeLegacy = {
837
849
  ],
838
850
  }
839
851
 
852
+ const textColor = {
853
+ from: [
854
+ /has-text-primary/g,
855
+ /has-text-white/g,
856
+ /has-text-black/g,
857
+ /has-text-grey-dark/g,
858
+ /has-text-grey/g,
859
+ /has-text-grey-light/g,
860
+ /has-text-light-blue/g,
861
+ /has-text-light-blue-light/g,
862
+ /has-text-info-light/g,
863
+ /has-text-primary-dark/g,
864
+ /has-text-primary-light/g,
865
+ /has-text-success/g,
866
+ /has-text-info/g,
867
+ /has-text-warning/g,
868
+ /has-text-danger/g,
869
+ /has-text-danger-dark/g,
870
+ /has-text-danger-darker/g,
871
+ ],
872
+ to: [
873
+ 'text-primary',
874
+ 'text-white',
875
+ 'text-black',
876
+ 'text-grey-dark',
877
+ 'text-grey',
878
+ 'text-grey-light',
879
+ 'text-primary-hovered',
880
+ 'text-inverted-hovered',
881
+ 'text-inverted-pressed',
882
+ 'text-primary-pressed',
883
+ 'text-primary-light',
884
+ 'text-success',
885
+ 'text-info',
886
+ 'text-warning',
887
+ 'text-danger',
888
+ 'text-danger-hovered',
889
+ 'text-danger-pressed',
890
+ ],
891
+ }
892
+
840
893
  const textAlignment = {
841
894
  from: [
842
895
  /has-text-centered-desktop/g,
@@ -1108,6 +1161,7 @@ const replacementsTypography = {
1108
1161
  /is-family-title/g,
1109
1162
  ...textAlignment.from,
1110
1163
  ...textSizeLegacy.from,
1164
+ ...textColor.from,
1111
1165
  /has-text/g,
1112
1166
  /is-size/g,
1113
1167
  ],
@@ -1123,6 +1177,7 @@ const replacementsTypography = {
1123
1177
  'font-family-title',
1124
1178
  ...textAlignment.to,
1125
1179
  ...textSizeLegacy.to,
1180
+ ...textColor.to,
1126
1181
  'text',
1127
1182
  'text',
1128
1183
  ],
@@ -1330,4 +1385,192 @@ const replacementsCSSVariablesTextSize = {
1330
1385
  ],
1331
1386
  }
1332
1387
 
1388
+ const replacementsCSSVariablesInvertedWhite = {
1389
+ from: [
1390
+ /var\(--bal-color-black-inverted\)/g,
1391
+ /var\(--bal-color-grey-5-inverted\)/g,
1392
+ /var\(--bal-color-grey-6-inverted\)/g,
1393
+ /var\(--bal-color-blue-4-inverted\)/g,
1394
+ /var\(--bal-color-blue-5-inverted\)/g,
1395
+ /var\(--bal-color-blue-6-inverted\)/g,
1396
+ /var\(--bal-color-light-blue-4-inverted\)/g,
1397
+ /var\(--bal-color-light-blue-5-inverted\)/g,
1398
+ /var\(--bal-color-light-blue-6-inverted\)/g,
1399
+ /var\(--bal-color-purple-4-inverted\)/g,
1400
+ /var\(--bal-color-purple-5-inverted\)/g,
1401
+ /var\(--bal-color-purple-6-inverted\)/g,
1402
+ /var\(--bal-color-green-6-inverted\)/g,
1403
+ /var\(--bal-color-yellow-6-inverted\)/g,
1404
+ /var\(--bal-color-red-4-inverted\)/g,
1405
+ /var\(--bal-color-red-5-inverted\)/g,
1406
+ /var\(--bal-color-red-6-inverted\)/g,
1407
+ /var\(--bal-color-info-3-inverted\)/g,
1408
+ /var\(--bal-color-info-4-inverted\)/g,
1409
+ /var\(--bal-color-info-5-inverted\)/g,
1410
+ /var\(--bal-color-info-6-inverted\)/g,
1411
+ /var\(--bal-color-success-3-inverted\)/g,
1412
+ /var\(--bal-color-success-4-inverted\)/g,
1413
+ /var\(--bal-color-success-5-inverted\)/g,
1414
+ /var\(--bal-color-success-6-inverted\)/g,
1415
+ /var\(--bal-color-danger-3-inverted\)/g,
1416
+ /var\(--bal-color-danger-4-inverted\)/g,
1417
+ /var\(--bal-color-danger-5-inverted\)/g,
1418
+ /var\(--bal-color-danger-6-inverted\)/g,
1419
+ /var\(--bal-color-primary-4-inverted\)/g,
1420
+ /var\(--bal-color-primary-5-inverted\)/g,
1421
+ /var\(--bal-color-primary-6-inverted\)/g,
1422
+ /var\(--bal-color-primary-inverted\)/g,
1423
+ /var\(--bal-color-blue-inverted\)/g,
1424
+ /var\(--bal-color-info-inverted\)/g,
1425
+ /var\(--bal-color-success-inverted\)/g,
1426
+ /var\(--bal-color-danger-inverted\)/g,
1427
+ ],
1428
+ to: [
1429
+ 'var(--bal-color-white)',
1430
+ 'var(--bal-color-white)',
1431
+ 'var(--bal-color-white)',
1432
+ 'var(--bal-color-white)',
1433
+ 'var(--bal-color-white)',
1434
+ 'var(--bal-color-white)',
1435
+ 'var(--bal-color-white)',
1436
+ 'var(--bal-color-white)',
1437
+ 'var(--bal-color-white)',
1438
+ 'var(--bal-color-white)',
1439
+ 'var(--bal-color-white)',
1440
+ 'var(--bal-color-white)',
1441
+ 'var(--bal-color-white)',
1442
+ 'var(--bal-color-white)',
1443
+ 'var(--bal-color-white)',
1444
+ 'var(--bal-color-white)',
1445
+ 'var(--bal-color-white)',
1446
+ 'var(--bal-color-white)',
1447
+ 'var(--bal-color-white)',
1448
+ 'var(--bal-color-white)',
1449
+ 'var(--bal-color-white)',
1450
+ 'var(--bal-color-white)',
1451
+ 'var(--bal-color-white)',
1452
+ 'var(--bal-color-white)',
1453
+ 'var(--bal-color-white)',
1454
+ 'var(--bal-color-white)',
1455
+ 'var(--bal-color-white)',
1456
+ 'var(--bal-color-white)',
1457
+ 'var(--bal-color-white)',
1458
+ 'var(--bal-color-white)',
1459
+ 'var(--bal-color-white)',
1460
+ 'var(--bal-color-white)',
1461
+ 'var(--bal-color-white)',
1462
+ 'var(--bal-color-white)',
1463
+ 'var(--bal-color-white)',
1464
+ 'var(--bal-color-white)',
1465
+ 'var(--bal-color-white)',
1466
+ ],
1467
+ }
1468
+
1469
+ const replacementsCSSVariablesInvertedPrimary = {
1470
+ from: [
1471
+ /var\(--bal-color-transparent-inverted\)/g,
1472
+ /var\(--bal-color-white-inverted\)/g,
1473
+ /var\(--bal-color-grey-1-inverted\)/g,
1474
+ /var\(--bal-color-grey-2-inverted\)/g,
1475
+ /var\(--bal-color-grey-3-inverted\)/g,
1476
+ /var\(--bal-color-grey-4-inverted\)/g,
1477
+ /var\(--bal-color-blue-1-inverted\)/g,
1478
+ /var\(--bal-color-blue-2-inverted\)/g,
1479
+ /var\(--bal-color-blue-3-inverted\)/g,
1480
+ /var\(--bal-color-light-blue-1-inverted\)/g,
1481
+ /var\(--bal-color-light-blue-2-inverted\)/g,
1482
+ /var\(--bal-color-light-blue-3-inverted\)/g,
1483
+ /var\(--bal-color-purple-1-inverted\)/g,
1484
+ /var\(--bal-color-purple-2-inverted\)/g,
1485
+ /var\(--bal-color-purple-3-inverted\)/g,
1486
+ /var\(--bal-color-green-1-inverted\)/g,
1487
+ /var\(--bal-color-green-2-inverted\)/g,
1488
+ /var\(--bal-color-green-3-inverted\)/g,
1489
+ /var\(--bal-color-green-4-inverted\)/g,
1490
+ /var\(--bal-color-green-5-inverted\)/g,
1491
+ /var\(--bal-color-yellow-1-inverted\)/g,
1492
+ /var\(--bal-color-yellow-2-inverted\)/g,
1493
+ /var\(--bal-color-yellow-3-inverted\)/g,
1494
+ /var\(--bal-color-yellow-4-inverted\)/g,
1495
+ /var\(--bal-color-yellow-5-inverted\)/g,
1496
+ /var\(--bal-color-red-1-inverted\)/g,
1497
+ /var\(--bal-color-red-2-inverted\)/g,
1498
+ /var\(--bal-color-red-3-inverted\)/g,
1499
+ /var\(--bal-color-info-1-inverted\)/g,
1500
+ /var\(--bal-color-info-2-inverted\)/g,
1501
+ /var\(--bal-color-success-1-inverted\)/g,
1502
+ /var\(--bal-color-success-2-inverted\)/g,
1503
+ /var\(--bal-color-warning-1-inverted\)/g,
1504
+ /var\(--bal-color-warning-2-inverted\)/g,
1505
+ /var\(--bal-color-warning-3-inverted\)/g,
1506
+ /var\(--bal-color-warning-4-inverted\)/g,
1507
+ /var\(--bal-color-warning-5-inverted\)/g,
1508
+ /var\(--bal-color-warning-6-inverted\)/g,
1509
+ /var\(--bal-color-danger-1-inverted\)/g,
1510
+ /var\(--bal-color-danger-2-inverted\)/g,
1511
+ /var\(--bal-color-primary-1-inverted\)/g,
1512
+ /var\(--bal-color-primary-2-inverted\)/g,
1513
+ /var\(--bal-color-primary-3-inverted\)/g,
1514
+ /var\(--bal-color-grey-inverted\)/g,
1515
+ /var\(--bal-color-light-blue-inverted\)/g,
1516
+ /var\(--bal-color-purple-inverted\)/g,
1517
+ /var\(--bal-color-green-inverted\)/g,
1518
+ /var\(--bal-color-yellow-inverted\)/g,
1519
+ /var\(--bal-color-red-inverted\)/g,
1520
+ /var\(--bal-color-warning-inverted\)/g,
1521
+ ],
1522
+ to: [
1523
+ 'var(--bal-color-primary)',
1524
+ 'var(--bal-color-primary)',
1525
+ 'var(--bal-color-primary)',
1526
+ 'var(--bal-color-primary)',
1527
+ 'var(--bal-color-primary)',
1528
+ 'var(--bal-color-primary)',
1529
+ 'var(--bal-color-primary)',
1530
+ 'var(--bal-color-primary)',
1531
+ 'var(--bal-color-primary)',
1532
+ 'var(--bal-color-primary)',
1533
+ 'var(--bal-color-primary)',
1534
+ 'var(--bal-color-primary)',
1535
+ 'var(--bal-color-primary)',
1536
+ 'var(--bal-color-primary)',
1537
+ 'var(--bal-color-primary)',
1538
+ 'var(--bal-color-primary)',
1539
+ 'var(--bal-color-primary)',
1540
+ 'var(--bal-color-primary)',
1541
+ 'var(--bal-color-primary)',
1542
+ 'var(--bal-color-primary)',
1543
+ 'var(--bal-color-primary)',
1544
+ 'var(--bal-color-primary)',
1545
+ 'var(--bal-color-primary)',
1546
+ 'var(--bal-color-primary)',
1547
+ 'var(--bal-color-primary)',
1548
+ 'var(--bal-color-primary)',
1549
+ 'var(--bal-color-primary)',
1550
+ 'var(--bal-color-primary)',
1551
+ 'var(--bal-color-primary)',
1552
+ 'var(--bal-color-primary)',
1553
+ 'var(--bal-color-primary)',
1554
+ 'var(--bal-color-primary)',
1555
+ 'var(--bal-color-primary)',
1556
+ 'var(--bal-color-primary)',
1557
+ 'var(--bal-color-primary)',
1558
+ 'var(--bal-color-primary)',
1559
+ 'var(--bal-color-primary)',
1560
+ 'var(--bal-color-primary)',
1561
+ 'var(--bal-color-primary)',
1562
+ 'var(--bal-color-primary)',
1563
+ 'var(--bal-color-primary)',
1564
+ 'var(--bal-color-primary)',
1565
+ 'var(--bal-color-primary)',
1566
+ 'var(--bal-color-primary)',
1567
+ 'var(--bal-color-primary)',
1568
+ 'var(--bal-color-primary)',
1569
+ 'var(--bal-color-primary)',
1570
+ 'var(--bal-color-primary)',
1571
+ 'var(--bal-color-primary)',
1572
+ 'var(--bal-color-primary)',
1573
+ ],
1574
+ }
1575
+
1333
1576
  main()
package/css/all.css CHANGED
@@ -600,7 +600,7 @@ fieldset {
600
600
  }
601
601
  /**
602
602
  * Do not edit directly
603
- * Generated on Mon, 04 Mar 2024 13:56:36 GMT
603
+ * Generated on Mon, 11 Mar 2024 09:46:46 GMT
604
604
  */
605
605
  :root {
606
606
  --bal-text-shadow-normal: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5); /* Increases readability when used on a image background. */