superdesk-ui-framework 2.4.14 → 2.4.18

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 (154) hide show
  1. package/app/index.js +1 -0
  2. package/app/scripts/modals.js +22 -9
  3. package/app/styles/_accessibility.scss +3 -2
  4. package/app/styles/_buttons.scss +17 -0
  5. package/app/styles/_modals.scss +23 -17
  6. package/app/styles/_tooltips.scss +66 -0
  7. package/app/styles/app.scss +1 -0
  8. package/app/styles/components/_sd-toaster.scss +6 -5
  9. package/app/styles/form-elements/_inputs.scss +1 -0
  10. package/app/styles/form-elements/_select-grid.scss +77 -0
  11. package/app/styles/pr-superdesk-theme.scss +3 -1
  12. package/app/styles/primereact/_pr-menu.scss +38 -0
  13. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  14. package/app/styles/variables/_colors.scss +30 -18
  15. package/app-typescript/components/Button.tsx +2 -2
  16. package/app-typescript/components/Dropdown.tsx +0 -1
  17. package/app-typescript/components/DropdownFirst.tsx +2 -2
  18. package/app-typescript/components/IconPicker.tsx +277 -0
  19. package/app-typescript/components/Input.tsx +8 -3
  20. package/app-typescript/components/ListItemLoader.tsx +30 -0
  21. package/app-typescript/components/Menu.tsx +149 -0
  22. package/app-typescript/components/PropsList.tsx +2 -2
  23. package/app-typescript/components/Radio.tsx +19 -10
  24. package/app-typescript/components/Select.tsx +6 -3
  25. package/app-typescript/components/SelectGrid.tsx +233 -0
  26. package/app-typescript/components/SelectWithTemplate.tsx +0 -2
  27. package/app-typescript/components/Skeleton.tsx +48 -0
  28. package/app-typescript/components/Tag.tsx +2 -2
  29. package/app-typescript/components/Toast.tsx +31 -5
  30. package/app-typescript/components/ToastMessage.tsx +9 -16
  31. package/app-typescript/components/ToastText.tsx +2 -4
  32. package/app-typescript/components/ToastWrapper.tsx +4 -4
  33. package/app-typescript/components/Togglebox.tsx +108 -0
  34. package/app-typescript/components/Tooltip.tsx +25 -1
  35. package/app-typescript/index.ts +8 -0
  36. package/dist/components/modals.html +180 -4
  37. package/dist/examples.bundle.css +52 -36
  38. package/dist/examples.bundle.js +5775 -3059
  39. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +14 -1
  40. package/dist/react/Alerts.tsx +4 -4
  41. package/dist/react/Autocomplete.tsx +17 -17
  42. package/dist/react/Badges.tsx +4 -4
  43. package/dist/react/BigIconFont.tsx +3 -3
  44. package/dist/react/ButtonGroups.tsx +6 -6
  45. package/dist/react/Buttons.tsx +11 -11
  46. package/dist/react/Carousel.tsx +15 -15
  47. package/dist/react/Checkboxs.tsx +10 -10
  48. package/dist/react/DatePicker.tsx +6 -6
  49. package/dist/react/Dropdowns.tsx +15 -15
  50. package/dist/react/EmptyStates.tsx +4 -4
  51. package/dist/react/GridItem.tsx +8 -8
  52. package/dist/react/GridList.tsx +3 -3
  53. package/dist/react/IconButtons.tsx +3 -3
  54. package/dist/react/IconFont.tsx +10 -9
  55. package/dist/react/IconLabels.tsx +4 -4
  56. package/dist/react/IconPicker.tsx +65 -0
  57. package/dist/react/Index.tsx +27 -2
  58. package/dist/react/Inputs.tsx +29 -11
  59. package/dist/react/Labels.tsx +6 -6
  60. package/dist/react/LeftNavigations.tsx +6 -6
  61. package/dist/react/ListItems.tsx +34 -0
  62. package/dist/react/Menu.tsx +159 -0
  63. package/dist/react/Modal.tsx +9 -9
  64. package/dist/react/NavButtons.tsx +7 -7
  65. package/dist/react/Popover.tsx +5 -5
  66. package/dist/react/Radios.tsx +29 -29
  67. package/dist/react/SelectGrid.tsx +121 -0
  68. package/dist/react/Selects.tsx +31 -9
  69. package/dist/react/Switch.tsx +5 -5
  70. package/dist/react/Tabs.tsx +12 -12
  71. package/dist/react/TimePicker.tsx +4 -4
  72. package/dist/react/Toasts.tsx +44 -56
  73. package/dist/react/Togglebox.tsx +51 -0
  74. package/dist/react/Tooltips.tsx +48 -4
  75. package/dist/superdesk-ui.bundle.css +3774 -96
  76. package/dist/superdesk-ui.bundle.js +4503 -2050
  77. package/dist/vendor.bundle.js +53312 -53308
  78. package/examples/pages/components/modals.html +180 -4
  79. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +14 -1
  80. package/examples/pages/react/Alerts.tsx +4 -4
  81. package/examples/pages/react/Autocomplete.tsx +17 -17
  82. package/examples/pages/react/Badges.tsx +4 -4
  83. package/examples/pages/react/BigIconFont.tsx +3 -3
  84. package/examples/pages/react/ButtonGroups.tsx +6 -6
  85. package/examples/pages/react/Buttons.tsx +11 -11
  86. package/examples/pages/react/Carousel.tsx +15 -15
  87. package/examples/pages/react/Checkboxs.tsx +10 -10
  88. package/examples/pages/react/DatePicker.tsx +6 -6
  89. package/examples/pages/react/Dropdowns.tsx +15 -15
  90. package/examples/pages/react/EmptyStates.tsx +4 -4
  91. package/examples/pages/react/GridItem.tsx +8 -8
  92. package/examples/pages/react/GridList.tsx +3 -3
  93. package/examples/pages/react/IconButtons.tsx +3 -3
  94. package/examples/pages/react/IconFont.tsx +10 -9
  95. package/examples/pages/react/IconLabels.tsx +4 -4
  96. package/examples/pages/react/IconPicker.tsx +65 -0
  97. package/examples/pages/react/Index.tsx +27 -2
  98. package/examples/pages/react/Inputs.tsx +29 -11
  99. package/examples/pages/react/Labels.tsx +6 -6
  100. package/examples/pages/react/LeftNavigations.tsx +6 -6
  101. package/examples/pages/react/ListItems.tsx +34 -0
  102. package/examples/pages/react/Menu.tsx +159 -0
  103. package/examples/pages/react/Modal.tsx +9 -9
  104. package/examples/pages/react/NavButtons.tsx +7 -7
  105. package/examples/pages/react/Popover.tsx +5 -5
  106. package/examples/pages/react/Radios.tsx +29 -29
  107. package/examples/pages/react/SelectGrid.tsx +121 -0
  108. package/examples/pages/react/Selects.tsx +31 -9
  109. package/examples/pages/react/Switch.tsx +5 -5
  110. package/examples/pages/react/Tabs.tsx +12 -12
  111. package/examples/pages/react/TimePicker.tsx +4 -4
  112. package/examples/pages/react/Toasts.tsx +44 -56
  113. package/examples/pages/react/Togglebox.tsx +51 -0
  114. package/examples/pages/react/Tooltips.tsx +48 -4
  115. package/package.json +2 -2
  116. package/patches/@superdesk+primereact+5.0.2-4.patch +13 -0
  117. package/react/components/Button.d.ts +1 -1
  118. package/react/components/Button.js +2 -1
  119. package/react/components/Dropdown.js +0 -1
  120. package/react/components/DropdownFirst.js +1 -1
  121. package/react/components/IconPicker.d.ts +24 -0
  122. package/react/components/IconPicker.js +283 -0
  123. package/react/components/Input.d.ts +2 -1
  124. package/react/components/Input.js +4 -1
  125. package/react/components/ListItemLoader.d.ts +4 -0
  126. package/react/components/ListItemLoader.js +62 -0
  127. package/react/components/Menu.d.ts +59 -0
  128. package/react/components/Menu.js +92 -0
  129. package/react/components/PropsList.d.ts +1 -1
  130. package/react/components/PropsList.js +1 -1
  131. package/react/components/Radio.d.ts +8 -7
  132. package/react/components/Radio.js +1 -1
  133. package/react/components/Select.d.ts +2 -1
  134. package/react/components/Select.js +4 -2
  135. package/react/components/SelectGrid.d.ts +45 -0
  136. package/react/components/SelectGrid.js +179 -0
  137. package/react/components/SelectWithTemplate.js +0 -1
  138. package/react/components/Skeleton.d.ts +30 -0
  139. package/react/components/Skeleton.js +55 -0
  140. package/react/components/Tag.js +1 -1
  141. package/react/components/Toast.d.ts +15 -0
  142. package/react/components/Toast.js +69 -0
  143. package/react/components/ToastMessage.d.ts +18 -0
  144. package/react/components/ToastMessage.js +66 -0
  145. package/react/components/ToastText.d.ts +9 -0
  146. package/react/components/ToastText.js +42 -0
  147. package/react/components/ToastWrapper.d.ts +31 -0
  148. package/react/components/ToastWrapper.js +116 -0
  149. package/react/components/Togglebox.d.ts +27 -0
  150. package/react/components/Togglebox.js +76 -0
  151. package/react/components/Tooltip.d.ts +2 -5
  152. package/react/components/Tooltip.js +48 -7
  153. package/react/index.d.ts +7 -0
  154. package/react/index.js +14 -0
package/dist/components/modals.html CHANGED
@@ -20,6 +20,7 @@
20
20
  <div class="modal__body">
21
21
  <p>This is sample message inside modal!</p>
22
22
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
23
+ <button class="btn" ng-click="openModal('modalActive6')">Open modal inside modal</button>
23
24
  </div>
24
25
  <div class="modal__footer">
25
26
  <button class="btn" ng-click="closeModal('modalActive')">Cancel</button>
@@ -202,19 +203,22 @@
202
203
  <button class="icn-btn" ng-click="closeModal('modalActive3')"><i class="icon-close-small"></i></button>
203
204
  </div>
204
205
  <div class="modal__body">
205
- <p>This is sample message inside modal!</p>
206
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
206
+ <p>This is sample message inside the modal!</p>
207
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh
208
+ ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
209
+ Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
210
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
207
211
  </div>
208
212
  <div class="modal__footer">
209
213
  <button class="btn" ng-click="closeModal('modalActive3')">Cancel</button>
210
- <button class="btn btn--primary" ng-click="closeModal('modalActive3')">Ok</button>
214
+ <button class="btn btn btn--primary btn" ng-click="closeModal('modalActive3')">Ok</button>
211
215
  </div>
212
216
  </div>
213
217
  </div>
214
218
  <div class="docs-page__code-markup">
215
219
  <pre class="prettyprint lang-html linenums">
216
220
  <button class="btn" ng-click="openModal('modalActive')">Show modal</button>
217
- <div sd-modal data-model="modalActive" class="modal--fill" ng-non-bindable>
221
+ <div theme="dark-ui" sd-modal data-model="modalActive" class="modal--fill" ng-non-bindable>
218
222
  <div class="modal__header modal__header--flex">
219
223
  <h3 class="modal__heading">Modal Fill</h3>
220
224
  <button class="icn-btn" ng-click="closeModal('modalActive')"><i class="icon-close-small"></i></button>
@@ -276,6 +280,178 @@
276
280
  </div>
277
281
  </div>
278
282
  </div>
283
+ <h3 class="docs-page__h3">Dark modal</h3>
284
+ <p class="docs-page__paragraph">The modal can be rendered in dark mode by adding<code>theme="dark-ui"</code> on div <code>sd-modal</code>. This example shown uses a custom layout inside the modal body.</p>
285
+ <div class="docs-page__code-window" doc-tabs>
286
+ <div class="docs-page__window-bar">
287
+ <a id="example" href="#" class="active">Example</a>
288
+ <a id="markup" href="#">Markup</a>
289
+ </div>
290
+ <div class="docs-page__window-content">
291
+ <div class="docs-page__code-example" doc-modal>
292
+ <button class="btn" ng-click="openModal('modalActive9')">Show dark modal</button>
293
+ <div sd-modal theme="dark-ui" data-model="modalActive9" class="modal--fill">
294
+ <div class="modal__header modal__header--flex">
295
+ <h3 class="modal__heading">Modal dark (fill option)</h3>
296
+ <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
297
+ </div>
298
+ <div class="sd-wrap-helper">
299
+ <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
300
+ <div class="sd-main-content-grid__content sd-padding--2">
301
+ <div class="sd-grid-list">
302
+ <div class="sd-grid-item sd-grid-item__type--audio">
303
+ <div class="sd-grid-item__media"></div>
304
+ <div class="sd-grid-item__content">
305
+ Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
306
+ Lorem ipsum dolor sit amet,consectetur adipiscing elit.
307
+ </div>
308
+ <div class="sd-grid-item__footer">
309
+ <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
310
+ <span class="label label--success label--translucent">Success</span>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="sd-grid-item sd-grid-item__type--audio">
315
+ <div class="sd-grid-item__media"></div>
316
+ <div class="sd-grid-item__content">
317
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
318
+ Sed posuere consectetur est at lobortis.
319
+ </div>
320
+ <div class="sd-grid-item__footer">
321
+ <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
322
+ <span class="label label--success label--translucent">Success</span>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ <div class="sd-main-content-grid__preview open-preview">
329
+ <div class="side-panel__container">
330
+ <div class="side-panel side-panel--right">
331
+ <div class="side-panel__content">
332
+ <div class="side-panel__content-block side-panel__content-block--flex">
333
+ <div class="side-panel__content-block-inner side-panel__content-block-inner--grow">
334
+ <div class="form__item">
335
+ <div class="sd-input">
336
+ <label class="sd-input__label">Input label</label>
337
+ <input class="sd-input__input" type="text">
338
+ <div class="sd-input__char-count">00/90</div>
339
+ <div class="sd-input__message-box">
340
+ <div class="sd-input__hint">Hendrerit in vulputate.</div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ <div class="form__item">
345
+ <div class="sd-input sd-input--is-select">
346
+ <label class="sd-input__label">Select label</label>
347
+ <select class="sd-input__select">
348
+ <option value="one">Option one</option>
349
+ <option value="two">Option two</option>
350
+ <option value="three">Option three</option>
351
+ </select>
352
+ <div class="sd-input__message-box">
353
+ <div class="sd-input__hint">Maecenas faucibus mollis interdum.</div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ <div class="modal__footer">
366
+ <button class="btn" ng-click="closeModal('modalActive9')">Cancel</button>
367
+ <button class="btn btn--primary" ng-click="closeModal('modalActive9')">Ok</button>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ <div class="docs-page__code-markup">
372
+ <pre class="prettyprint lang-html linenums">
373
+ <button class="btn" ng-click="openModal('modalActive9')">Show dark modal</button>
374
+ <div sd-modal theme="dark-ui" data-model="modalActive9" class="modal--fill" ng-non-bindable>
375
+ <div class="modal__header modal__header--flex">
376
+ <h3 class="modal__heading">Modal dark (fill option)</h3>
377
+ <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
378
+ </div>
379
+ <div class="sd-wrap-helper">
380
+ <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
381
+ <div class="sd-main-content-grid__content sd-padding--2">
382
+ <div class="sd-grid-list">
383
+ <div class="sd-grid-item sd-grid-item__type--audio">
384
+ <div class="sd-grid-item__media"></div>
385
+ <div class="sd-grid-item__content">
386
+ Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
387
+ Lorem ipsum dolor sit amet,consectetur adipiscing elit.
388
+ </div>
389
+ <div class="sd-grid-item__footer">
390
+ <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
391
+ <span class="label label--success label--translucent">Success</span>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ <div class="sd-grid-item sd-grid-item__type--audio">
396
+ <div class="sd-grid-item__media"></div>
397
+ <div class="sd-grid-item__content">
398
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
399
+ Sed posuere consectetur est at lobortis.
400
+ </div>
401
+ <div class="sd-grid-item__footer">
402
+ <div class="sd-grid-item__footer-block sd-grid-item__footer-block--left">
403
+ <span class="label label--success label--translucent">Success</span>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ <div class="sd-main-content-grid__preview open-preview">
410
+ <div class="side-panel__container">
411
+ <div class="side-panel side-panel--right">
412
+ <div class="side-panel__content">
413
+ <div class="side-panel__content-block side-panel__content-block--flex">
414
+ <div class="side-panel__content-block-inner side-panel__content-block-inner--grow">
415
+ <div class="form__item">
416
+ <div class="sd-input">
417
+ <label class="sd-input__label">Input label</label>
418
+ <input class="sd-input__input" type="text">
419
+ <div class="sd-input__char-count">00/90</div>
420
+ <div class="sd-input__message-box">
421
+ <div class="sd-input__hint">Hendrerit in vulputate.</div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ <div class="form__item">
426
+ <div class="sd-input sd-input--is-select">
427
+ <label class="sd-input__label">Select label</label>
428
+ <select class="sd-input__select">
429
+ <option value="one">Option one</option>
430
+ <option value="two">Option two</option>
431
+ <option value="three">Option three</option>
432
+ </select>
433
+ <div class="sd-input__message-box">
434
+ <div class="sd-input__hint">Maecenas faucibus mollis interdum.</div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ <div class="modal__footer">
447
+ <button class="btn" ng-click="closeModal('modalActive9')">Cancel</button>
448
+ <button class="btn btn--primary" ng-click="closeModal('modalActive9')">Ok</button>
449
+ </div>
450
+ </div>
451
+ </pre>
452
+ </div>
453
+ </div>
454
+ </div>
279
455
  <h3 class="docs-page__h3">Tabs</h3>
280
456
  <p class="docs-page__paragraph">Special case for modals with tabbed navigation and nested footer inside the body. Add class <code>.modal--tabs</code> on div <code>sd-modal</code>. This version also works with different modal size, for example just add <code>.modal--large</code> to get large modal with tabs.</p>
281
457
  <div class="docs-page__code-window" doc-tabs>
package/dist/examples.bundle.css CHANGED
@@ -3467,22 +3467,25 @@ pre[class*="language-"] {
3467
3467
  --color-contrast-bg--hover: #f4f4f4;
3468
3468
  --color-selected-bg: #eaf2f5;
3469
3469
  --color-selected-bg--hover: #dfebf0;
3470
- --color-bg-00: #ffffff;
3471
- --color-bg-50: #f8f8f8;
3472
- --color-bg-100: #ededed;
3473
- --color-bg-150: #dfdfdf;
3474
- --color-bg-200: #a1a1a1;
3470
+ --color-bg-00: hsl(0, 0%, 100%);
3471
+ --color-bg-50: hsl(0, 0%, 97%);
3472
+ --color-bg-100: hsl(0, 0%, 93%);
3473
+ --color-bg-150: hsl(0, 0%, 87%);
3474
+ --color-bg-200: hsl(0, 0%, 63%);
3475
3475
  --color-bg-800: #2c2c2c;
3476
3476
  --color-kanban-border: #4d4d4d;
3477
3477
  --color-inset-search-bg: #ffffff;
3478
3478
  --color-inset-search-border: rgba(0,0,0,.20);
3479
3479
  --color-inset-search-border-hover: rgba(0,0,0,.35);
3480
- --color-assignment-to-do: #c4170b;
3481
- --color-assignment-progress: #d17d00;
3482
- --color-assignment-completed: #74a838;
3483
- --color-grid-item-Bg: #fff;
3484
- --color-dropdown-menu-Bg: rgb(255,255,255);
3485
- --color-dropdown-menu-text: rgb(51, 51, 51); }
3480
+ --color-assignment-to-do: #c4170b;
3481
+ --color-assignment-progress: #d17d00;
3482
+ --color-assignment-completed: #74a838;
3483
+ --color-grid-item-Bg: hsl(0, 0%, 100%);
3484
+ --color-dropdown-menu-Bg: rgb(255,255,255);
3485
+ --color-dropdown-menu-text: rgb(51, 51, 51);
3486
+ --color-bg__modal: hsla(0, 0%, 100%, 1);
3487
+ --color-line__modal: hsla(0, 0%, 90%);
3488
+ --color-bg__select-option: hsla(0, 0%, 100%, 1); }
3486
3489
 
3487
3490
  [data-theme="dark-ui"] {
3488
3491
  color: #fff;
@@ -3496,8 +3499,8 @@ pre[class*="language-"] {
3496
3499
  --color-form-bg: #3b3b3b;
3497
3500
  --color-text: rgb(244, 244, 244);
3498
3501
  --color-text-light: rgba(244, 244, 244,0.75);
3499
- --color-contrast-bg: #333;
3500
- --color-contrast-bg--hover: #383838;
3502
+ --color-contrast-bg: hsl(0, 0%, 20%);
3503
+ --color-contrast-bg--hover: hsl(0, 0%, 22%);
3501
3504
  --color-selected-bg: #35393b;
3502
3505
  --color-selected-bg--hover: #3b4246;
3503
3506
  --color-bg-00: #111111;
@@ -3507,18 +3510,23 @@ pre[class*="language-"] {
3507
3510
  --color-bg-200: #484848;
3508
3511
  --color-bg-800: #212121;
3509
3512
  --color-kanban-border: #8e8e8e;
3510
- --color-inset-search-bg: rgba(0,0,0,0.2);
3513
+ --color-inset-search-bg: rgba(0,0,0,0.2);
3511
3514
  --color-inset-search-border: rgba(255,255,255,0.35);
3512
3515
  --color-inset-search-border-hover: rgba(255,255,255,0.55);
3513
- --color-grid-item-Bg: #272727; }
3516
+ --color-grid-item-Bg: hsl(0, 0%, 15%);
3517
+ --color-bg__modal: hsla(0, 0%, 20%);
3518
+ --color-line__modal: hsla(0, 0%, 25%);
3519
+ --color-bg__select-option: hsla(0, 0%, 20%, 1); }
3514
3520
  [data-theme="dark-ui"] [class^="big-icon--"],
3515
3521
  [data-theme="dark-ui"] [class*=" big-icon--"] {
3516
3522
  color: #fff; }
3517
3523
 
3518
3524
  [class^="--dark-ui"],
3519
- [class*="--dark-ui"] {
3520
- --color-contrast-bg: #333;
3521
- --color-contrast-bg--hover: #383838; }
3525
+ [class*="--dark-ui"],
3526
+ .dark-ui {
3527
+ --color-contrast-bg: hsl(0, 0%, 20%);
3528
+ --color-contrast-bg--hover: hsl(0, 0%, 22%);
3529
+ --color-bg__select-option: hsla(0, 0%, 20%, 1); }
3522
3530
 
3523
3531
  [data-theme="accessible-light-ui"] {
3524
3532
  --font-size-large: 1.5rem;
@@ -6731,22 +6739,25 @@ pre[class*="language-"] {
6731
6739
  --color-contrast-bg--hover: #f4f4f4;
6732
6740
  --color-selected-bg: #eaf2f5;
6733
6741
  --color-selected-bg--hover: #dfebf0;
6734
- --color-bg-00: #ffffff;
6735
- --color-bg-50: #f8f8f8;
6736
- --color-bg-100: #ededed;
6737
- --color-bg-150: #dfdfdf;
6738
- --color-bg-200: #a1a1a1;
6742
+ --color-bg-00: hsl(0, 0%, 100%);
6743
+ --color-bg-50: hsl(0, 0%, 97%);
6744
+ --color-bg-100: hsl(0, 0%, 93%);
6745
+ --color-bg-150: hsl(0, 0%, 87%);
6746
+ --color-bg-200: hsl(0, 0%, 63%);
6739
6747
  --color-bg-800: #2c2c2c;
6740
6748
  --color-kanban-border: #4d4d4d;
6741
6749
  --color-inset-search-bg: #ffffff;
6742
6750
  --color-inset-search-border: rgba(0,0,0,.20);
6743
6751
  --color-inset-search-border-hover: rgba(0,0,0,.35);
6744
- --color-assignment-to-do: #c4170b;
6745
- --color-assignment-progress: #d17d00;
6746
- --color-assignment-completed: #74a838;
6747
- --color-grid-item-Bg: #fff;
6748
- --color-dropdown-menu-Bg: rgb(255,255,255);
6749
- --color-dropdown-menu-text: rgb(51, 51, 51); }
6752
+ --color-assignment-to-do: #c4170b;
6753
+ --color-assignment-progress: #d17d00;
6754
+ --color-assignment-completed: #74a838;
6755
+ --color-grid-item-Bg: hsl(0, 0%, 100%);
6756
+ --color-dropdown-menu-Bg: rgb(255,255,255);
6757
+ --color-dropdown-menu-text: rgb(51, 51, 51);
6758
+ --color-bg__modal: hsla(0, 0%, 100%, 1);
6759
+ --color-line__modal: hsla(0, 0%, 90%);
6760
+ --color-bg__select-option: hsla(0, 0%, 100%, 1); }
6750
6761
 
6751
6762
  [data-theme="dark-ui"] {
6752
6763
  color: #fff;
@@ -6760,8 +6771,8 @@ pre[class*="language-"] {
6760
6771
  --color-form-bg: #3b3b3b;
6761
6772
  --color-text: rgb(244, 244, 244);
6762
6773
  --color-text-light: rgba(244, 244, 244,0.75);
6763
- --color-contrast-bg: #333;
6764
- --color-contrast-bg--hover: #383838;
6774
+ --color-contrast-bg: hsl(0, 0%, 20%);
6775
+ --color-contrast-bg--hover: hsl(0, 0%, 22%);
6765
6776
  --color-selected-bg: #35393b;
6766
6777
  --color-selected-bg--hover: #3b4246;
6767
6778
  --color-bg-00: #111111;
@@ -6771,18 +6782,23 @@ pre[class*="language-"] {
6771
6782
  --color-bg-200: #484848;
6772
6783
  --color-bg-800: #212121;
6773
6784
  --color-kanban-border: #8e8e8e;
6774
- --color-inset-search-bg: rgba(0,0,0,0.2);
6785
+ --color-inset-search-bg: rgba(0,0,0,0.2);
6775
6786
  --color-inset-search-border: rgba(255,255,255,0.35);
6776
6787
  --color-inset-search-border-hover: rgba(255,255,255,0.55);
6777
- --color-grid-item-Bg: #272727; }
6788
+ --color-grid-item-Bg: hsl(0, 0%, 15%);
6789
+ --color-bg__modal: hsla(0, 0%, 20%);
6790
+ --color-line__modal: hsla(0, 0%, 25%);
6791
+ --color-bg__select-option: hsla(0, 0%, 20%, 1); }
6778
6792
  [data-theme="dark-ui"] [class^="big-icon--"],
6779
6793
  [data-theme="dark-ui"] [class*=" big-icon--"] {
6780
6794
  color: #fff; }
6781
6795
 
6782
6796
  [class^="--dark-ui"],
6783
- [class*="--dark-ui"] {
6784
- --color-contrast-bg: #333;
6785
- --color-contrast-bg--hover: #383838; }
6797
+ [class*="--dark-ui"],
6798
+ .dark-ui {
6799
+ --color-contrast-bg: hsl(0, 0%, 20%);
6800
+ --color-contrast-bg--hover: hsl(0, 0%, 22%);
6801
+ --color-bg__select-option: hsla(0, 0%, 20%, 1); }
6786
6802
 
6787
6803
  [data-theme="accessible-light-ui"] {
6788
6804
  --font-size-large: 1.5rem;