superdesk-ui-framework 4.0.23 → 4.0.25

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 (42) hide show
  1. package/.github/CODEOWNERS +1 -0
  2. package/.github/workflows/test.yml +3 -3
  3. package/app/index.js +1 -0
  4. package/app/styles/_big-icon-font.scss +1 -1
  5. package/app/styles/_boxed-list.scss +60 -24
  6. package/app/styles/_design-tokens.scss +3 -0
  7. package/app/styles/_helpers.scss +5 -1
  8. package/app/styles/_labels.scss +82 -71
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/components/_calendar-week-day.scss +97 -0
  11. package/app/styles/design-tokens/_brand-colors.scss +32 -0
  12. package/app/styles/design-tokens/_new-colors.scss +18 -0
  13. package/app/styles/design-tokens/_primitives.scss +161 -0
  14. package/app/styles/design-tokens/_semantic-colors.scss +145 -0
  15. package/app/styles/form-elements/_checkbox.scss +15 -0
  16. package/app-typescript/components/Button.tsx +3 -0
  17. package/app-typescript/components/Lists/BoxedList.tsx +2 -0
  18. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +36 -0
  19. package/app-typescript/components/RadioButtonGroup.tsx +1 -1
  20. package/app-typescript/components/avatar/avatar-image.tsx +8 -1
  21. package/app-typescript/index.ts +1 -0
  22. package/dist/components/BoxedList.tsx +27 -2
  23. package/dist/components/RadioGroup.tsx +26 -3
  24. package/dist/examples.bundle.js +1341 -1175
  25. package/dist/playgrounds/react-playgrounds/TestGround.tsx +117 -0
  26. package/dist/superdesk-ui.bundle.css +519 -222
  27. package/dist/superdesk-ui.bundle.js +982 -897
  28. package/dist/vendor.bundle.js +14 -14
  29. package/examples/pages/components/BoxedList.tsx +27 -2
  30. package/examples/pages/components/RadioGroup.tsx +26 -3
  31. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +117 -0
  32. package/package.json +1 -1
  33. package/react/components/Button.d.ts +1 -0
  34. package/react/components/Button.js +2 -0
  35. package/react/components/Lists/BoxedList.d.ts +1 -0
  36. package/react/components/Lists/BoxedList.js +1 -0
  37. package/react/components/Lists/CalendarWeekDayItem.d.ts +15 -0
  38. package/react/components/Lists/CalendarWeekDayItem.js +67 -0
  39. package/react/components/RadioButtonGroup.js +1 -1
  40. package/react/components/avatar/avatar-image.js +1 -1
  41. package/react/index.d.ts +1 -0
  42. package/react/index.js +3 -1
@@ -772,6 +772,301 @@
772
772
  content: "\e926";
773
773
  }
774
774
  .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}@charset "UTF-8";
775
+ :root {
776
+ --l-base: 35%;
777
+ --l-100-add: 55;
778
+ --l-200-add: 34;
779
+ --l-300-add: 20;
780
+ --l-400-add: 8;
781
+ --l-600-remove: 10;
782
+ --l-700-remove: 20;
783
+ --l-800-remove: 35;
784
+ --c-base: 75;
785
+ --c-100-remove: 60;
786
+ --c-200-remove: 45;
787
+ --c-300-remove: 30;
788
+ --c-400-remove: 10;
789
+ --c-600-add: 0;
790
+ --c-700-add: 0;
791
+ --c-800-add: 0;
792
+ --morocco-red-500: lch(var(--l-base) var(--c-base) 28);
793
+ --morocco-red-100: lch(from var(--morocco-red-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
794
+ --morocco-red-200: lch(from var(--morocco-red-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
795
+ --morocco-red-300: lch(from var(--morocco-red-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
796
+ --morocco-red-400: lch(from var(--morocco-red-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
797
+ --morocco-red-600: lch(from var(--morocco-red-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
798
+ --morocco-red-700: lch(from var(--morocco-red-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
799
+ --morocco-red-800: lch(from var(--morocco-red-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
800
+ --morocco-red-500-a32: lch(from var(--morocco-red-500) l c h / .32);
801
+ --morocco-red-500-a24: lch(from var(--morocco-red-500) l c h / .24);
802
+ --morocco-red-500-a16: lch(from var(--morocco-red-500) l c h / .16);
803
+ --morocco-red-500-a12: lch(from var(--morocco-red-500) l c h / .12);
804
+ --syrah-soil-500: lch(var(--l-base) var(--c-base) 74);
805
+ --syrah-soil-100: lch(from var(--syrah-soil-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
806
+ --syrah-soil-200: lch(from var(--syrah-soil-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
807
+ --syrah-soil-300: lch(from var(--syrah-soil-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
808
+ --syrah-soil-400: lch(from var(--syrah-soil-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
809
+ --syrah-soil-600: lch(from var(--syrah-soil-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
810
+ --syrah-soil-700: lch(from var(--syrah-soil-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
811
+ --syrah-soil-800: lch(from var(--syrah-soil-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
812
+ --syrah-soil-500-a32: hsl(from var(--syrah-soil-500) h s l / .32);
813
+ --syrah-soil-500-a24: hsl(from var(--syrah-soil-500) h s l / .24);
814
+ --syrah-soil-500-a16: hsl(from var(--syrah-soil-500) h s l / .16);
815
+ --syrah-soil-500-a12: hsl(from var(--syrah-soil-500) h s l / .12);
816
+ --green-brier-500: lch(var(--l-base) var(--c-base) 126);
817
+ --green-brier-100: lch(from var(--green-brier-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
818
+ --green-brier-200: lch(from var(--green-brier-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
819
+ --green-brier-300: lch(from var(--green-brier-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
820
+ --green-brier-400: lch(from var(--green-brier-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
821
+ --green-brier-600: lch(from var(--green-brier-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
822
+ --green-brier-700: lch(from var(--green-brier-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
823
+ --green-brier-800: lch(from var(--green-brier-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
824
+ --green-brier-400-a32: hsl(from var(--green-brier-400) h s l / .32);
825
+ --green-brier-400-a24: hsl(from var(--green-brier-400) h s l / .24);
826
+ --green-brier-400-a16: hsl(from var(--green-brier-400) h s l / .16);
827
+ --green-brier-400-a12: hsl(from var(--green-brier-400) h s l / .12);
828
+ --green-brier-500-a32: hsl(from var(--green-brier-500) h s l / .32);
829
+ --green-brier-500-a24: hsl(from var(--green-brier-500) h s l / .24);
830
+ --green-brier-500-a16: hsl(from var(--green-brier-500) h s l / .16);
831
+ --green-brier-500-a12: hsl(from var(--green-brier-500) h s l / .12);
832
+ --sorcerer-blue-500: lch(var(--l-base) var(--c-base) 202);
833
+ --sorcerer-blue-100: lch(from var(--sorcerer-blue-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
834
+ --sorcerer-blue-200: lch(from var(--sorcerer-blue-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
835
+ --sorcerer-blue-300: lch(from var(--sorcerer-blue-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
836
+ --sorcerer-blue-400: lch(from var(--sorcerer-blue-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
837
+ --sorcerer-blue-600: lch(from var(--sorcerer-blue-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
838
+ --sorcerer-blue-700: lch(from var(--sorcerer-blue-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
839
+ --sorcerer-blue-800: lch(from var(--sorcerer-blue-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
840
+ --sorcerer-blue-500-a32: hsl(from var(--sorcerer-blue-500) h s l / .32);
841
+ --sorcerer-blue-500-a24: hsl(from var(--sorcerer-blue-500) h s l / .24);
842
+ --sorcerer-blue-500-a16: hsl(from var(--sorcerer-blue-500) h s l / .16);
843
+ --sorcerer-blue-500-a12: hsl(from var(--sorcerer-blue-500) h s l / .12);
844
+ --palatinate-blue-500: lch(var(--l-base) var(--c-base) 280);
845
+ --palatinate-blue-100: lch(from var(--palatinate-blue-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
846
+ --palatinate-blue-200: lch(from var(--palatinate-blue-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
847
+ --palatinate-blue-300: lch(from var(--palatinate-blue-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
848
+ --palatinate-blue-400: lch(from var(--palatinate-blue-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
849
+ --palatinate-blue-600: lch(from var(--palatinate-blue-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
850
+ --palatinate-blue-700: lch(from var(--palatinate-blue-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
851
+ --palatinate-blue-800: lch(from var(--palatinate-blue-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
852
+ --palatinate-blue-500-a32: hsl(from var(--palatinate-blue-500) h s l / .32);
853
+ --palatinate-blue-500-a24: hsl(from var(--palatinate-blue-500) h s l / .24);
854
+ --palatinate-blue-500-a16: hsl(from var(--palatinate-blue-500) h s l / .16);
855
+ --palatinate-blue-500-a12: hsl(from var(--palatinate-blue-500) h s l / .12);
856
+ --purple-spot-500: lch(var(--l-base) var(--c-base) 307);
857
+ --purple-spot-100: lch(from var(--purple-spot-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
858
+ --purple-spot-200: lch(from var(--purple-spot-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
859
+ --purple-spot-300: lch(from var(--purple-spot-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
860
+ --purple-spot-400: lch(from var(--purple-spot-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
861
+ --purple-spot-600: lch(from var(--purple-spot-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
862
+ --purple-spot-700: lch(from var(--purple-spot-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
863
+ --purple-spot-800: lch(from var(--purple-spot-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
864
+ --purple-spot-500-a32: hsl(from var(--purple-spot-500) h s l / .32);
865
+ --purple-spot-500-a24: hsl(from var(--purple-spot-500) h s l / .24);
866
+ --purple-spot-500-a16: hsl(from var(--purple-spot-500) h s l / .16);
867
+ --purple-spot-500-a12: hsl(from var(--purple-spot-500) h s l / .12);
868
+ --blissful-berry-500: lch(var(--l-base) var(--c-base) 338);
869
+ --blissful-berry-100: lch(from var(--blissful-berry-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
870
+ --blissful-berry-200: lch(from var(--blissful-berry-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
871
+ --blissful-berry-300: lch(from var(--blissful-berry-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
872
+ --blissful-berry-400: lch(from var(--blissful-berry-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
873
+ --blissful-berry-600: lch(from var(--blissful-berry-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
874
+ --blissful-berry-700: lch(from var(--blissful-berry-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
875
+ --blissful-berry-800: lch(from var(--blissful-berry-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
876
+ --blissful-berry-500-a32: hsl(from var(--blissful-berry-500) h s l / .32);
877
+ --blissful-berry-500-a24: hsl(from var(--blissful-berry-500) h s l / .24);
878
+ --blissful-berry-500-a16: hsl(from var(--blissful-berry-500) h s l / .16);
879
+ --blissful-berry-500-a12: hsl(from var(--blissful-berry-500) h s l / .12);
880
+ --buoyant-grey-500: lch(46% 11 260);
881
+ --buoyant-grey-000: lch(from var(--buoyant-grey-500) calc(l + 54) calc(c - 12) h);
882
+ --buoyant-grey-050: lch(from var(--buoyant-grey-500) calc(l + 50.8) calc(c - 9) h);
883
+ --buoyant-grey-100: lch(from var(--buoyant-grey-500) calc(l + 48.2) calc(c - 9) h);
884
+ --buoyant-grey-125: lch(from var(--buoyant-grey-500) calc(l + 45.5) calc(c - 8) h);
885
+ --buoyant-grey-150: lch(from var(--buoyant-grey-500) calc(l + 39) calc(c - 6) h);
886
+ --buoyant-grey-200: lch(from var(--buoyant-grey-500) calc(l + 30) calc(c - 4) h);
887
+ --buoyant-grey-300: lch(from var(--buoyant-grey-500) calc(l + 20) calc(c - 2) h);
888
+ --buoyant-grey-400: lch(from var(--buoyant-grey-500) calc(l + 10) calc(c - 0) h);
889
+ --buoyant-grey-600: lch(from var(--buoyant-grey-500) calc(l - 8) calc(c + 0) h);
890
+ --buoyant-grey-700: lch(from var(--buoyant-grey-500) calc(l - 16) calc(c + 0) h);
891
+ --buoyant-grey-800: lch(from var(--buoyant-grey-500) calc(l - 22) calc(c + 0) h);
892
+ --buoyant-grey-825: lch(from var(--buoyant-grey-500) calc(l - 26) calc(c + 0) h);
893
+ --buoyant-grey-850: lch(from var(--buoyant-grey-500) calc(l - 31) calc(c + 1) h);
894
+ --buoyant-grey-900: lch(from var(--buoyant-grey-500) calc(l - 36) calc(c + 2) h);
895
+ --buoyant-grey-950: lch(from var(--buoyant-grey-500) calc(l - 42) calc(c + 2) h);
896
+ --buoyant-grey-999: lch(from var(--buoyant-grey-500) calc(l - 46) calc(c - 11) h);
897
+ --buoyant-grey-200-a40: hsl(from var(--buoyant-grey-200) h s l / .40);
898
+ --buoyant-grey-200-a32: hsl(from var(--buoyant-grey-200) h s l / .32);
899
+ --buoyant-grey-200-a24: hsl(from var(--buoyant-grey-200) h s l / .24);
900
+ --buoyant-grey-200-a16: hsl(from var(--buoyant-grey-200) h s l / .16);
901
+ --buoyant-grey-200-a12: hsl(from var(--buoyant-grey-200) h s l / .12);
902
+ --buoyant-grey-300-a40: hsl(from var(--buoyant-grey-300) h s l / .40);
903
+ --buoyant-grey-300-a32: hsl(from var(--buoyant-grey-300) h s l / .32);
904
+ --buoyant-grey-300-a24: hsl(from var(--buoyant-grey-300) h s l / .24);
905
+ --buoyant-grey-300-a16: hsl(from var(--buoyant-grey-300) h s l / .16);
906
+ --buoyant-grey-300-a12: hsl(from var(--buoyant-grey-300) h s l / .12);
907
+ --buoyant-grey-400-a40: hsl(from var(--buoyant-grey-400) h s l / .40);
908
+ --buoyant-grey-400-a32: hsl(from var(--buoyant-grey-400) h s l / .32);
909
+ --buoyant-grey-400-a24: hsl(from var(--buoyant-grey-400) h s l / .24);
910
+ --buoyant-grey-400-a16: hsl(from var(--buoyant-grey-400) h s l / .16);
911
+ --buoyant-grey-400-a12: hsl(from var(--buoyant-grey-400) h s l / .12);
912
+ --buoyant-grey-500-a40: hsl(from var(--buoyant-grey-500) h s l / .40);
913
+ --buoyant-grey-500-a32: hsl(from var(--buoyant-grey-500) h s l / .32);
914
+ --buoyant-grey-500-a24: hsl(from var(--buoyant-grey-500) h s l / .24);
915
+ --buoyant-grey-500-a16: hsl(from var(--buoyant-grey-500) h s l / .16);
916
+ --buoyant-grey-500-a12: hsl(from var(--buoyant-grey-500) h s l / .12);
917
+ --buoyant-grey-600-a40: hsl(from var(--buoyant-grey-600) h s l / .40);
918
+ --buoyant-grey-600-a32: hsl(from var(--buoyant-grey-600) h s l / .32);
919
+ --buoyant-grey-600-a24: hsl(from var(--buoyant-grey-600) h s l / .24);
920
+ --buoyant-grey-600-a16: hsl(from var(--buoyant-grey-600) h s l / .16);
921
+ --buoyant-grey-600-a12: hsl(from var(--buoyant-grey-600) h s l / .12); }
922
+
923
+ :root {
924
+ --brand-primary-l-base: 60%;
925
+ --brand-primary-c-base: 40;
926
+ --brand-secondary-l-base: 60%;
927
+ --brand-secondary-c-base: 40 ;
928
+ --brand-primary: lch(var(--brand-primary-l-base) var(--brand-primary-c-base) 237);
929
+ --brand-primary-100: lch(from var(--brand-primary) calc(l + 36) calc(c - 34) h);
930
+ --brand-primary-200: lch(from var(--brand-primary) calc(l + var(--l-200-add)) calc(c - 32) h);
931
+ --brand-primary-300: lch(from var(--brand-primary) calc(l + var(--l-300-add)) calc(c - 22) h);
932
+ --brand-primary-400: lch(from var(--brand-primary) calc(l + var(--l-400-add)) calc(c - 10) h);
933
+ --brand-primary-600: lch(from var(--brand-primary) calc(l - var(--l-600-remove)) calc(c + 0) h);
934
+ --brand-primary-700: lch(from var(--brand-primary) calc(l - var(--l-700-remove)) calc(c + 0) h);
935
+ --brand-primary-800: lch(from var(--brand-primary) calc(l - 28) calc(c + 0) h);
936
+ --brand-primary-950: lch(from var(--brand-primary) calc(l - 50) calc(c - 10) h);
937
+ --brand-primary-a32: hsl(from var(--brand-primary) h s l / .32);
938
+ --brand-primary-a24: hsl(from var(--brand-primary) h s l / .24);
939
+ --brand-primary-a16: hsl(from var(--brand-primary) h s l / .16);
940
+ --brand-primary-a12: hsl(from var(--brand-primary) h s l / .12);
941
+ --brand-secondary: lch(var(--brand-secondary-l-base) var(--brand-secondary-c-base) 166);
942
+ --brand-secondary-200: lch(from var(--brand-secondary) calc(l + var(--l-200-add)) calc(c - 36) h);
943
+ --brand-secondary-300: lch(from var(--brand-secondary) calc(l + var(--l-300-add)) calc(c - 20) h);
944
+ --brand-secondary-400: lch(from var(--brand-secondary) calc(l + var(--l-400-add)) calc(c - 8) h);
945
+ --brand-secondary-600: lch(from var(--brand-secondary) calc(l - var(--l-600-remove)) calc(c + 0) h);
946
+ --brand-secondary-700: lch(from var(--brand-secondary) calc(l - var(--l-700-remove)) calc(c + 0) h);
947
+ --brand-secondary-800: lch(from var(--brand-secondary) calc(l - 28) calc(c + 0) h);
948
+ --brand-secondary-950: lch(from var(--brand-secondary) calc(l - 40) calc(c + 10) h); }
949
+
950
+ :root {
951
+ --color-surface-base: var(--buoyant-grey-000);
952
+ --color-surface-muted: var(--buoyant-grey-050);
953
+ --color-surface-subdued: var(--buoyant-grey-100);
954
+ --color-surface-faded: var(--buoyant-grey-125);
955
+ --color-surface-base-translucent: var(--buoyant-grey-200-a16);
956
+ --color-surface-muted-translucent: var(--buoyant-grey-200-a16);
957
+ --color-surface-subdued-translucent: var(--buoyant-grey-200-a32);
958
+ --color-surface-faded-translucent: var(--buoyant-grey-200-a32);
959
+ --color-text-default: var(--buoyant-grey-900);
960
+ --color-text-muted: var(--buoyant-grey-600);
961
+ --color-text-subdued: var(--buoyant-grey-500);
962
+ --color-text-inverse: var(--buoyant-grey-050);
963
+ --color-text-ondark: var(--buoyant-grey-000);
964
+ --color-text-onlight: var(--buoyant-grey-900);
965
+ --color-line-x-light: var(--buoyant-grey-500-a16);
966
+ --color-line-light: var(--buoyant-grey-500-a24);
967
+ --color-line-medium: var(--buoyant-grey-500-a32);
968
+ --color-line-strong: var(--buoyant-grey-500-a40);
969
+ --color-primary-default: var(--brand-primary-700);
970
+ --color-primary-highlight: var(--brand-primary);
971
+ --color-primary-text: var(--brand-primary-800);
972
+ --color-primary-translucent: var(--brand-primary-a16);
973
+ --color-primary-translucent-strong: var(--brand-primary-a32);
974
+ --color-success-default: var(--green-brier-400);
975
+ --color-success-highlight: var(--green-brier-300);
976
+ --color-success-text: var(--green-brier-600);
977
+ --color-success-translucent: var(--green-brier-400-a12);
978
+ --color-warning-default: var(--syrah-soil-300);
979
+ --color-warning-highlight: var(--syrah-soil-200);
980
+ --color-warning-text: var(--syrah-soil-400);
981
+ --color-warning-translucent: var(--syrah-soil-500-a12);
982
+ --color-alert-default: var(--morocco-red-500);
983
+ --color-alert-highlight: var(--morocco-red-400);
984
+ --color-alert-text: var(--morocco-red-600);
985
+ --color-alert-translucent: var(--morocco-red-500-a16);
986
+ --color-highlight-default: var(--blissful-berry-400);
987
+ --color-highlight-highlight: var(--blissful-berry-300);
988
+ --color-highlight-text: var(--blissful-berry-600);
989
+ --color-highlight-translucent: var(--blissful-berry-500-a12);
990
+ --color-info-default: var(--sorcerer-blue-500);
991
+ --color-info-highlight: var(--sorcerer-blue-300);
992
+ --color-info-text: var(--sorcerer-blue-700);
993
+ --color-info-translucent: var(--sorcerer-blue-500-a12);
994
+ --color-neutral-light-default: var(--buoyant-grey-300-a24);
995
+ --color-neutral-light-text: var(--buoyant-grey-700);
996
+ --color-neutral-medium-default: var(--buoyant-grey-200);
997
+ --color-neutral-strong-default: var(--buoyant-grey-600);
998
+ --color-neutral-strong-text: var(--buoyant-grey-100);
999
+ --color-interactive-default: var(--brand-primary-700);
1000
+ --color-interactive-highlight: var(--brand-primary);
1001
+ --color-interactive-text: var(--brand-primary-800);
1002
+ --color-interactive-translucent: var(--brand-primary-a16);
1003
+ --color-interactive-translucent-strong: var(--brand-primary-a32);
1004
+ --color-interactive-surface-selected: var(--brand-primary-100);
1005
+ --color-interactive-shadow-focus: var(--brand-primary-a32);
1006
+ --color-item-bg-normal: var(--color-surface-base);
1007
+ --color-item-bg-hover: var(--color-surface-muted);
1008
+ --color-item-bg-active: var(--color-interactive-surface-selected);
1009
+ --color-item-border-active: var(--color-interactive-translucent-strong);
1010
+ --color-item-overlay-actioning: hsl(from var(--color-surface-base) h s l / .70); }
1011
+
1012
+ [data-theme="dark-ui"] {
1013
+ --color-surface-base: var(--buoyant-grey-900);
1014
+ --color-surface-muted: var(--buoyant-grey-850);
1015
+ --color-surface-subdued: var(--buoyant-grey-825);
1016
+ --color-surface-faded: var(--buoyant-grey-800);
1017
+ --color-surface-muted-translucent: var(--buoyant-grey-600-a16);
1018
+ --color-surface-subdued-translucent: var(--buoyant-grey-600-a32);
1019
+ --color-surface-faded-translucent: var(--buoyant-grey-600-a32);
1020
+ --color-text-default: var(--buoyant-grey-050);
1021
+ --color-text-muted: var(--buoyant-grey-200);
1022
+ --color-text-subdued: var(--buoyant-grey-300);
1023
+ --color-text-inverse: var(--buoyant-grey-900);
1024
+ --color-text-ondark: var(--buoyant-grey-000);
1025
+ --color-text-onlight: var(--buoyant-grey-900);
1026
+ --color-line-x-light: var(--buoyant-grey-300-a16);
1027
+ --color-line-light: var(--buoyant-grey-300-a24);
1028
+ --color-line-medium: var(--buoyant-grey-300-a32);
1029
+ --color-line-strong: var(--buoyant-grey-300-a40);
1030
+ --color-primary-default: var(--brand-primary-700);
1031
+ --color-primary-highlight: var(--brand-primary-600);
1032
+ --color-primary-text: var(--brand-primary-400);
1033
+ --color-primary-translucent: var(--brand-primary-a16);
1034
+ --color-primary-highlight-translucent: var(--brand-primary-600-a16);
1035
+ --color-success-default: var(--green-brier-500);
1036
+ --color-success-highlight: var(--green-brier-400);
1037
+ --color-success-text: var(--green-brier-300);
1038
+ --color-success-translucent: var(--green-brier-400-a16);
1039
+ --color-warning-default: var(--syrah-soil-400);
1040
+ --color-warning-highlight: var(--syrah-soil-300);
1041
+ --color-warning-text: var(--syrah-soil-300);
1042
+ --color-warning-translucent: var(--syrah-soil-500-a16);
1043
+ --color-alert-default: var(--morocco-red-600);
1044
+ --color-alert-text: var(--morocco-red-400);
1045
+ --color-alert-translucent: var(--morocco-red-500-a16);
1046
+ --color-highlight-default: var(--blissful-berry-500);
1047
+ --color-highlight-text: var(--blissful-berry-300);
1048
+ --color-highlight-translucent: var(--blissful-berry-500-a16);
1049
+ --color-info-default: var(--sorcerer-blue-600);
1050
+ --color-info-text: var(--sorcerer-blue-300);
1051
+ --color-info-translucent: var(--sorcerer-blue-500-a16);
1052
+ --color-neutral-light-default: var(--buoyant-grey-500-a24);
1053
+ --color-neutral-light-text: var(--buoyant-grey-200);
1054
+ --color-neutral-medium-default: var(--buoyant-grey-300);
1055
+ --color-neutral-strong-default: var(--buoyant-grey-600);
1056
+ --color-neutral-strong-text: var(--buoyant-grey-100);
1057
+ --color-interactive-default: var(--brand-primary-700);
1058
+ --color-interactive-highlight: var(--brand-primary);
1059
+ --color-interactive-text: var(--brand-primary-400);
1060
+ --color-interactive-translucent: var(--brand-primary-a16);
1061
+ --color-interactive-translucent-strong: var(--brand-primary-a32);
1062
+ --color-interactive-surface-selected: var(--brand-primary-950);
1063
+ --color-interactive-shadow-focus: var(--brand-primary-a32);
1064
+ --color-item-bg-normal: var(--color-surface-base);
1065
+ --color-item-bg-hover: var(--color-surface-muted);
1066
+ --color-item-bg-active: var(--color-interactive-surface-selected);
1067
+ --color-item-border-active: var(--color-interactive-translucent-strong);
1068
+ --color-item-overlay-actioning: hsl(from var(--color-surface-base) h s l / .70); }
1069
+
775
1070
  :root {
776
1071
  --base-increment: 0.8rem;
777
1072
  --space--0: 0;
@@ -993,11 +1288,17 @@
993
1288
  --sd-colour-interactive: hsla(var(--sd-colour-interactive-l--50), 1);
994
1289
  --sd-colour-interactive--hover: hsla(var(--sd-colour-interactive-l--60), 1);
995
1290
  --sd-colour-interactive--active: hsla(var(--sd-colour-interactive-l--40), 1);
1291
+ --sd-colour-interactive--text: hsla(var(--sd-colour-interactive-l--30), 1);
996
1292
  --sd-colour-interactive-btn-border: hsla(var(--sd-colour-interactive-l--50), 0.5);
1293
+ --sd-colour-interactive-translucent-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
1294
+ --sd-colour-interactive-translucent-25: hsla(var(--sd-colour-interactive-l--50), 0.25);
997
1295
  --sd-colour-primary: hsla(var(--sd-colour-primary-l--50), 1);
998
1296
  --sd-colour-primary--hover: hsla(var(--sd-colour-primary-l--60), 1);
999
1297
  --sd-colour-primary--active: hsla(var(--sd-colour-primary-l--40), 1);
1298
+ --sd-colour-primary--text: hsla(var(--sd-colour-primary-l--30), 1);
1000
1299
  --sd-colour-primary-btn-border: hsla(var(--sd-colour-primary-l--50), 0.5);
1300
+ --sd-colour-primary-translucent-10: hsla(var(--sd-colour-primary-l--50), 0.1);
1301
+ --sd-colour-primary-translucent-25: hsla(var(--sd-colour-primary-l--50), 0.25);
1001
1302
  --sd-colour-secondary: hsla(var(--sd-colour-secondary-l--50), 1);
1002
1303
  --sd-colour-secondary--hover: hsla(var(--sd-colour-secondary-l--60), 1);
1003
1304
  --sd-colour-secondary--active: hsla(var(--sd-colour-secondary-l--40), 1);
@@ -1005,19 +1306,31 @@
1005
1306
  --sd-colour-success: hsla(var(--sd-colour-success-l--50), 1);
1006
1307
  --sd-colour-success--hover: hsla(var(--sd-colour-success-l--60), 1);
1007
1308
  --sd-colour-success--active: hsla(var(--sd-colour-success-l--40), 1);
1309
+ --sd-colour-success--text: hsla(var(--sd-colour-success-l--30), 1);
1008
1310
  --sd-colour-success-btn-border: hsla(var(--sd-colour-success-l--50), 0.5);
1311
+ --sd-colour-success-translucent-10: hsla(var(--sd-colour-success-l--50), 0.08);
1312
+ --sd-colour-success-translucent-25: hsla(var(--sd-colour-success-l--50), 0.29);
1009
1313
  --sd-colour-alert: hsla(var(--sd-colour-alert-l--50), 1);
1010
1314
  --sd-colour-alert--hover: hsla(var(--sd-colour-alert-l--60), 1);
1011
1315
  --sd-colour-alert--active: hsla(var(--sd-colour-alert-l--40), 1);
1316
+ --sd-colour-alert--text: hsla(var(--sd-colour-alert-l--30), 1);
1012
1317
  --sd-colour-alert-btn-border: hsla(var(--sd-colour-alert-l--50), 0.5);
1318
+ --sd-colour-alert-translucent-10: hsla(var(--sd-colour-alert-l--50), 0.08);
1319
+ --sd-colour-alert-translucent-25: hsla(var(--sd-colour-alert-l--50), 0.20);
1013
1320
  --sd-colour-warning: hsla(var(--sd-colour-warning-l--50), 1);
1014
1321
  --sd-colour-warning--hover: hsla(var(--sd-colour-warning-l--60), 1);
1015
1322
  --sd-colour-warning--active: hsla(var(--sd-colour-warning-l--40), 1);
1323
+ --sd-colour-warning--text: hsla(var(--sd-colour-warning-l--30), 1);
1016
1324
  --sd-colour-warning-btn-border: hsla(var(--sd-colour-warning-l--50), 0.5);
1325
+ --sd-colour-warning-translucent-10: hsla(var(--sd-colour-warning-l--50), 0.08);
1326
+ --sd-colour-warning-translucent-25: hsla(var(--sd-colour-warning-l--50), 0.25);
1017
1327
  --sd-colour-highlight: hsla(var(--sd-colour-highlight-l--50), 1);
1018
1328
  --sd-colour-highlight--hover: hsla(var(--sd-colour-highlight-l--60), 1);
1019
1329
  --sd-colour-highlight--active: hsla(var(--sd-colour-highlight-l--40), 1);
1330
+ --sd-colour-highlight--text: hsla(var(--sd-colour-highlight-l--30), 1);
1020
1331
  --sd-colour-highlight-btn-border: hsla(var(--sd-colour-highlight-l--50), 0.5);
1332
+ --sd-colour-highlight-translucent-10: hsla(var(--sd-colour-highlight-l--50), 0.1);
1333
+ --sd-colour-highlight-translucent-25: hsla(var(--sd-colour-highlight-l--50), 0.25);
1021
1334
  --sd-colour-superdesk: hsla(var(--sd-colour-superdesk-l--40), 1);
1022
1335
  --sd-colour-superdesk--hover: hsla(var(--sd-colour-superdesk-l--50), 1);
1023
1336
  --sd-colour-superdesk--active: hsla(var(--sd-colour-superdesk-l--30), 1);
@@ -6432,6 +6745,9 @@ h6 {
6432
6745
  .sd-flex-justify-end {
6433
6746
  justify-content: flex-end !important; }
6434
6747
 
6748
+ .sd-flex-justify-start {
6749
+ justify-content: flex-start !important; }
6750
+
6435
6751
  .sd-flex-justify-center {
6436
6752
  justify-content: center !important; }
6437
6753
 
@@ -8558,8 +8874,10 @@ h6 {
8558
8874
  white-space: nowrap;
8559
8875
  border: 1px solid transparent;
8560
8876
  font-weight: 500;
8561
- background: var(--sd-colour-bg--08);
8562
- color: var(--color-text--inverse); }
8877
+ color: var(--sd-lbl-fg);
8878
+ background-color: var(--sd-lbl-bg);
8879
+ --sd-lbl-bg: var(--buoyant-grey-600);
8880
+ --sd-lbl-fg: var(--color-text-ondark); }
8563
8881
  .label--large {
8564
8882
  padding-block-start: 0.5rem;
8565
8883
  padding-block-end: 0.5rem;
@@ -8567,163 +8885,62 @@ h6 {
8567
8885
  font-size: 1.2rem;
8568
8886
  height: 2.4rem;
8569
8887
  line-height: 2.4rem; }
8570
- .label.label--default {
8571
- background: #2c323a; }
8572
- .label.label--primary {
8573
- background: #5fa9c8; }
8574
8888
  .label.label--success {
8575
- background: #46a446; }
8889
+ --sd-lbl-bg: var(--color-success-default); }
8576
8890
  .label.label--warning {
8577
- background: #db8000; }
8891
+ --sd-lbl-bg: var(--color-warning-default); }
8578
8892
  .label.label--alert {
8579
- background: #e41b21; }
8893
+ --sd-lbl-bg: var(--color-alert-default); }
8580
8894
  .label.label--highlight {
8581
- background: #9b27b0; }
8582
- .label.label--success2 {
8583
- background: #557f2e; }
8584
- .label.label--yellow2 {
8585
- background: #d1a700; }
8586
- .label.label--orange2 {
8587
- background: #db7100; }
8588
- .label.label--red2 {
8589
- background: #bd1600; }
8590
- .label.label--highlight2 {
8591
- background: #e60086; }
8592
- .label.label--highlight3 {
8593
- background: #8a008a; }
8594
- .label.label--highlight4 {
8595
- background: #7400ad; }
8596
- .label.label--darkBlue2 {
8597
- background: navy; }
8598
- .label.label--sd-green {
8599
- background: #1eae6b; }
8895
+ --sd-lbl-bg: var(--color-highlight-default); }
8896
+ .label.label--primary {
8897
+ --sd-lbl-bg: var(--color-primary-default); }
8898
+ .label.label--info {
8899
+ --sd-lbl-bg: var(--color-info-default); }
8600
8900
  .label.label--hollow {
8601
- border: 1px solid var(--sd-colour-btn-txt-neutral);
8901
+ --sd-lbl-border: var(--color-text-subdued);
8902
+ border: 1px solid var(--sd-lbl-border);
8602
8903
  background-color: transparent !important;
8603
- color: var(--sd-colour-btn-txt-neutral); }
8604
- .label.label--hollow.label--default {
8605
- border: 1px solid #2c323a;
8606
- background-color: transparent !important;
8607
- color: #2c323a; }
8608
- .label.label--hollow.label--primary {
8609
- border: 1px solid #5fa9c8;
8610
- background-color: transparent !important;
8611
- color: #5fa9c8; }
8904
+ --sd-lbl-fg: var(--color-text-muted); }
8612
8905
  .label.label--hollow.label--success {
8613
- border: 1px solid #46a446;
8614
- background-color: transparent !important;
8615
- color: #46a446; }
8906
+ --sd-lbl-fg: var(--color-success-text);
8907
+ --sd-lbl-border: var(--color-success-default); }
8616
8908
  .label.label--hollow.label--warning {
8617
- border: 1px solid #db8000;
8618
- background-color: transparent !important;
8619
- color: #db8000; }
8909
+ --sd-lbl-fg: var(--color-warning-text);
8910
+ --sd-lbl-border: var(--color-warning-default); }
8620
8911
  .label.label--hollow.label--alert {
8621
- border: 1px solid #e41b21;
8622
- background-color: transparent !important;
8623
- color: #e41b21; }
8912
+ --sd-lbl-fg: var(--color-alert-text);
8913
+ --sd-lbl-border: var(--color-alert-default); }
8624
8914
  .label.label--hollow.label--highlight {
8625
- border: 1px solid #9b27b0;
8626
- background-color: transparent !important;
8627
- color: #9b27b0; }
8628
- .label.label--hollow.label--success2 {
8629
- border: 1px solid #557f2e;
8630
- background-color: transparent !important;
8631
- color: #557f2e; }
8632
- .label.label--hollow.label--yellow2 {
8633
- border: 1px solid #d1a700;
8634
- background-color: transparent !important;
8635
- color: #d1a700; }
8636
- .label.label--hollow.label--orange2 {
8637
- border: 1px solid #db7100;
8638
- background-color: transparent !important;
8639
- color: #db7100; }
8640
- .label.label--hollow.label--red2 {
8641
- border: 1px solid #bd1600;
8642
- background-color: transparent !important;
8643
- color: #bd1600; }
8644
- .label.label--hollow.label--highlight2 {
8645
- border: 1px solid #e60086;
8646
- background-color: transparent !important;
8647
- color: #e60086; }
8648
- .label.label--hollow.label--highlight3 {
8649
- border: 1px solid #8a008a;
8650
- background-color: transparent !important;
8651
- color: #8a008a; }
8652
- .label.label--hollow.label--highlight4 {
8653
- border: 1px solid #7400ad;
8654
- background-color: transparent !important;
8655
- color: #7400ad; }
8656
- .label.label--hollow.label--darkBlue2 {
8657
- border: 1px solid navy;
8658
- background-color: transparent !important;
8659
- color: navy; }
8660
- .label.label--hollow.label--sd-green {
8661
- border: 1px solid #1eae6b;
8662
- background-color: transparent !important;
8663
- color: #1eae6b; }
8915
+ --sd-lbl-fg: var(--color-highlight-text);
8916
+ --sd-lbl-border: var(--color-highlight-default); }
8917
+ .label.label--hollow.label--primary {
8918
+ --sd-lbl-fg: var(--color-primary-text);
8919
+ --sd-lbl-border: var(--color-primary-default); }
8920
+ .label.label--hollow.label--info {
8921
+ --sd-lbl-fg: var(--color-info-text);
8922
+ --sd-lbl-border: var(--color-info-default); }
8664
8923
  .label.label--translucent {
8665
- background-color: var(--sd-colour-bg-translucent--08);
8666
- color: var(--sd-colour-btn-txt-neutral); }
8667
- .label.label--translucent.label--default {
8668
- background-color: var(--sd-colour-bg-translucent--08);
8669
- color: #2c323a;
8670
- background-color: rgba(44, 50, 58, 0.2); }
8671
- .label.label--translucent.label--primary {
8672
- background-color: var(--sd-colour-bg-translucent--08);
8673
- color: #5fa9c8;
8674
- background-color: rgba(95, 169, 200, 0.2); }
8924
+ --sd-lbl-bg: var(--buoyant-grey-400-a24);
8925
+ --sd-lbl-fg: var(--color-text-muted); }
8675
8926
  .label.label--translucent.label--success {
8676
- background-color: var(--sd-colour-bg-translucent--08);
8677
- color: #46a446;
8678
- background-color: rgba(70, 164, 70, 0.2); }
8927
+ --sd-lbl-fg: var(--color-success-text);
8928
+ --sd-lbl-bg: var(--color-success-translucent); }
8679
8929
  .label.label--translucent.label--warning {
8680
- background-color: var(--sd-colour-bg-translucent--08);
8681
- color: #db8000;
8682
- background-color: rgba(219, 128, 0, 0.2); }
8930
+ --sd-lbl-fg: var(--color-warning-text);
8931
+ --sd-lbl-bg: var(--color-warning-translucent); }
8683
8932
  .label.label--translucent.label--alert {
8684
- background-color: var(--sd-colour-bg-translucent--08);
8685
- color: #e41b21;
8686
- background-color: rgba(228, 27, 33, 0.2); }
8933
+ --sd-lbl-fg: var(--color-alert-text);
8934
+ --sd-lbl-bg: var(--color-alert-translucent); }
8687
8935
  .label.label--translucent.label--highlight {
8688
- background-color: var(--sd-colour-bg-translucent--08);
8689
- color: #9b27b0;
8690
- background-color: rgba(155, 39, 176, 0.2); }
8691
- .label.label--translucent.label--success2 {
8692
- background-color: var(--sd-colour-bg-translucent--08);
8693
- color: #557f2e;
8694
- background-color: rgba(85, 127, 46, 0.2); }
8695
- .label.label--translucent.label--yellow2 {
8696
- background-color: var(--sd-colour-bg-translucent--08);
8697
- color: #d1a700;
8698
- background-color: rgba(209, 167, 0, 0.2); }
8699
- .label.label--translucent.label--orange2 {
8700
- background-color: var(--sd-colour-bg-translucent--08);
8701
- color: #db7100;
8702
- background-color: rgba(219, 113, 0, 0.2); }
8703
- .label.label--translucent.label--red2 {
8704
- background-color: var(--sd-colour-bg-translucent--08);
8705
- color: #bd1600;
8706
- background-color: rgba(189, 22, 0, 0.2); }
8707
- .label.label--translucent.label--highlight2 {
8708
- background-color: var(--sd-colour-bg-translucent--08);
8709
- color: #e60086;
8710
- background-color: rgba(230, 0, 134, 0.2); }
8711
- .label.label--translucent.label--highlight3 {
8712
- background-color: var(--sd-colour-bg-translucent--08);
8713
- color: #8a008a;
8714
- background-color: rgba(138, 0, 138, 0.2); }
8715
- .label.label--translucent.label--highlight4 {
8716
- background-color: var(--sd-colour-bg-translucent--08);
8717
- color: #7400ad;
8718
- background-color: rgba(116, 0, 173, 0.2); }
8719
- .label.label--translucent.label--darkBlue2 {
8720
- background-color: var(--sd-colour-bg-translucent--08);
8721
- color: navy;
8722
- background-color: rgba(0, 0, 128, 0.2); }
8723
- .label.label--translucent.label--sd-green {
8724
- background-color: var(--sd-colour-bg-translucent--08);
8725
- color: #1eae6b;
8726
- background-color: rgba(30, 174, 107, 0.2); }
8936
+ --sd-lbl-fg: var(--color-highlight-text);
8937
+ --sd-lbl-bg: var(--color-highlight-translucent); }
8938
+ .label.label--translucent.label--primary {
8939
+ --sd-lbl-fg: var(--color-primary-text);
8940
+ --sd-lbl-bg: var(--color-primary-translucent); }
8941
+ .label.label--translucent.label--info {
8942
+ --sd-lbl-fg: var(--color-info-text);
8943
+ --sd-lbl-bg: var(--color-info-translucent); }
8727
8944
 
8728
8945
  .label--annotation {
8729
8946
  background-color: #a2df58;
@@ -8744,7 +8961,10 @@ a.label {
8744
8961
  padding-block-start: 0;
8745
8962
  padding-block-end: 0;
8746
8963
  padding-inline-start: 0.8rem;
8747
- padding-inline-end: 1.8rem; }
8964
+ padding-inline-end: 1.8rem;
8965
+ outline-color: transparent;
8966
+ outline-offset: 1px;
8967
+ transition: outline 0.12s ease; }
8748
8968
  a.label::before {
8749
8969
  display: inline-block;
8750
8970
  font-family: 'sd_icons';
@@ -8761,7 +8981,8 @@ a.label {
8761
8981
  font-variant: normal;
8762
8982
  text-transform: none; }
8763
8983
  a.label:hover, a.label:focus {
8764
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
8984
+ outline-offset: 1px;
8985
+ outline: 1px solid var(--color-primary-default); }
8765
8986
 
8766
8987
  .label.label--hollow.label--darkBlue2 {
8767
8988
  border: 1px solid var(--sd-navy-color);
@@ -26102,96 +26323,51 @@ tags-input,
26102
26323
  display: flex;
26103
26324
  flex-direction: column;
26104
26325
  align-self: stretch;
26105
- gap: 0.8rem;
26106
- margin-block-end: 1.6rem; }
26326
+ gap: var(--space--1);
26327
+ margin-block-end: var(--space--2); }
26107
26328
 
26108
26329
  .boxed-list--compact {
26109
- gap: 0.8rem; }
26330
+ gap: var(--space--1); }
26110
26331
 
26111
26332
  .boxed-list--comfortable {
26112
- gap: 1.2rem; }
26333
+ gap: var(--space--1-5); }
26113
26334
 
26114
26335
  .boxed-list__item {
26336
+ --item-bg-color: var(--sd-item__main-Bg);
26337
+ --item-border-color: transparent;
26338
+ --item-radius: var(--b-radius--small);
26115
26339
  display: grid;
26116
26340
  grid-template-rows: [mainRow] 1fr [footerRow] auto;
26117
26341
  grid-template-columns: [mediaCol] auto [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
26118
26342
  position: relative;
26119
26343
  flex-direction: row;
26120
- border-radius: var(--b-radius--small);
26121
- background-color: var(--sd-item__main-Bg);
26122
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.1);
26344
+ border-radius: var(--item-radius);
26345
+ background-color: var(--item-bg-color);
26346
+ box-shadow: var(--sd-shadow--z1);
26123
26347
  transition: all 0.2s ease-in-out;
26124
26348
  flex-shrink: 0; }
26125
- .boxed-list__item.boxed-list__item--default::before {
26126
- content: "";
26127
- width: 4px;
26128
- height: 100%;
26129
- position: absolute;
26130
- inset-block-start: 0px;
26131
- inset-inline-start: 0px;
26132
- background-color: #8c97a6;
26133
- z-index: 1;
26134
- border-radius: 3px 0 0 3px; }
26135
- .boxed-list__item.boxed-list__item--primary::before {
26136
- content: "";
26137
- width: 4px;
26138
- height: 100%;
26139
- position: absolute;
26140
- inset-block-start: 0px;
26141
- inset-inline-start: 0px;
26142
- background-color: #5fa9c8;
26143
- z-index: 1;
26144
- border-radius: 3px 0 0 3px; }
26145
- .boxed-list__item.boxed-list__item--success::before {
26146
- content: "";
26147
- width: 4px;
26148
- height: 100%;
26149
- position: absolute;
26150
- inset-block-start: 0px;
26151
- inset-inline-start: 0px;
26152
- background-color: #46a446;
26153
- z-index: 1;
26154
- border-radius: 3px 0 0 3px; }
26155
- .boxed-list__item.boxed-list__item--warning::before {
26156
- content: "";
26157
- width: 4px;
26158
- height: 100%;
26159
- position: absolute;
26160
- inset-block-start: 0px;
26161
- inset-inline-start: 0px;
26162
- background-color: #db8000;
26163
- z-index: 1;
26164
- border-radius: 3px 0 0 3px; }
26165
- .boxed-list__item.boxed-list__item--alert::before {
26166
- content: "";
26167
- width: 4px;
26168
- height: 100%;
26169
- position: absolute;
26170
- inset-block-start: 0px;
26171
- inset-inline-start: 0px;
26172
- background-color: #e41b21;
26173
- z-index: 1;
26174
- border-radius: 3px 0 0 3px; }
26175
- .boxed-list__item.boxed-list__item--highlight::before {
26349
+ .boxed-list__item::before {
26176
26350
  content: "";
26177
26351
  width: 4px;
26178
26352
  height: 100%;
26179
26353
  position: absolute;
26180
26354
  inset-block-start: 0px;
26181
26355
  inset-inline-start: 0px;
26182
- background-color: #9b27b0;
26356
+ background-color: var(--item-border-color);
26183
26357
  z-index: 1;
26184
- border-radius: 3px 0 0 3px; }
26185
- .boxed-list__item.boxed-list__item--sd-green::before {
26186
- content: "";
26187
- width: 4px;
26188
- height: 100%;
26189
- position: absolute;
26190
- inset-block-start: 0px;
26191
- inset-inline-start: 0px;
26192
- background-color: #1eae6b;
26193
- z-index: 1;
26194
- border-radius: 3px 0 0 3px; }
26358
+ border-radius: var(--item-radius) 0 0 var(--item-radius); }
26359
+ .boxed-list__item.boxed-list__item--default {
26360
+ --item-border-color: var(--color-neutral-medium-default); }
26361
+ .boxed-list__item.boxed-list__item--primary {
26362
+ --item-border-color: var(--color-primary-highlight); }
26363
+ .boxed-list__item.boxed-list__item--success {
26364
+ --item-border-color: var(--color-success-highlight); }
26365
+ .boxed-list__item.boxed-list__item--alert {
26366
+ --item-border-color: var(--color-alert-highlight); }
26367
+ .boxed-list__item.boxed-list__item--warning {
26368
+ --item-border-color: var(--color-warning-highlight); }
26369
+ .boxed-list__item.boxed-list__item--highlight {
26370
+ --item-border-color: var(--color-highlight-highlight); }
26195
26371
  .boxed-list__item.boxed-list__item--selected.boxed-list__item--clickable:hover {
26196
26372
  box-shadow: var(--sd-shadow__item--selected);
26197
26373
  background-color: var(--color-selected-bg--hover) !important; }
@@ -26219,6 +26395,21 @@ tags-input,
26219
26395
  .boxed-list__item:hover .boxed-list__actions--slide-in .p-carousel-prev:hover,
26220
26396
  .boxed-list__item:hover .boxed-list__actions--slide-in .p-carousel-next:hover {
26221
26397
  opacity: 1; }
26398
+ .boxed-list__item.boxed-list__item--colored-bg.boxed-list__item--primary {
26399
+ background-color: var(--color-primary-translucent);
26400
+ outline: 1px solid var(--color-primary-translucent); }
26401
+ .boxed-list__item.boxed-list__item--colored-bg.boxed-list__item--success {
26402
+ background-color: var(--color-success-translucent);
26403
+ outline: 1px solid var(--color-success-translucent); }
26404
+ .boxed-list__item.boxed-list__item--colored-bg.boxed-list__item--alert {
26405
+ background-color: var(--color-alert-translucent);
26406
+ outline: 1px solid var(--color-alert-translucent); }
26407
+ .boxed-list__item.boxed-list__item--colored-bg.boxed-list__item--warning {
26408
+ background-color: var(--color-warning-translucent);
26409
+ outline: 1px solid var(--color-warning-translucent); }
26410
+ .boxed-list__item.boxed-list__item--colored-bg.boxed-list__item--highlight {
26411
+ background-color: var(--color-highlight-translucent);
26412
+ outline: 1px solid var(--color-highlight-translucent); }
26222
26413
 
26223
26414
  .boxed-list__item--selected {
26224
26415
  box-shadow: var(--sd-shadow__item--selected); }
@@ -38318,6 +38509,88 @@ textarea.sd-media-carousel__media-title {
38318
38509
  .sd-pagination__item--more {
38319
38510
  pointer-events: none; }
38320
38511
 
38512
+ .calendar-week-day__item {
38513
+ --item-bg-color: var(--sd-item__main-Bg);
38514
+ --item-border-color: transparent;
38515
+ --item-radius: var(--b-radius--small);
38516
+ display: flex;
38517
+ flex-direction: column;
38518
+ position: relative;
38519
+ border-radius: var(--item-radius);
38520
+ background-color: var(--item-bg-color);
38521
+ transition: all 0.2s ease-in-out;
38522
+ flex-shrink: 0;
38523
+ min-height: 3.2rem;
38524
+ padding: var(--space--1-5); }
38525
+ .calendar-week-day__item::before {
38526
+ content: "";
38527
+ width: 4px;
38528
+ height: 100%;
38529
+ position: absolute;
38530
+ inset-block-start: 0px;
38531
+ inset-inline-start: 0px;
38532
+ background-color: var(--item-border-color);
38533
+ z-index: 1;
38534
+ border-radius: var(--item-radius) 0 0 var(--item-radius); }
38535
+ .calendar-week-day__item.calendar-week-day__item--colored-bg {
38536
+ outline-offset: -1px;
38537
+ --item-bg-color: var(--color-surface-faded);
38538
+ color: var(--item-fg-color); }
38539
+ .calendar-week-day__item.calendar-week-day__item--colored-bg.boxed-list__item--default {
38540
+ --item-border-color: var(--color-neutral-medium-default); }
38541
+ .calendar-week-day__item.calendar-week-day__item--colored-bg.calendar-week-day__item--primary {
38542
+ --item-bg-color: var(--color-primary-translucent);
38543
+ --item-fg-color: var(--color-primary-text);
38544
+ --item-border-color: var(--color-primary-highlight); }
38545
+ .calendar-week-day__item.calendar-week-day__item--colored-bg.calendar-week-day__item--success {
38546
+ --item-bg-color: var(--color-success-translucent);
38547
+ --item-fg-color: var(--color-success-text);
38548
+ --item-border-color: var(--color-success-highlight); }
38549
+ .calendar-week-day__item.calendar-week-day__item--colored-bg.calendar-week-day__item--alert {
38550
+ --item-bg-color: var(--color-alert-translucent);
38551
+ --item-fg-color: var(--color-alert-text);
38552
+ --item-border-color: var(--color-alert-highlight); }
38553
+ .calendar-week-day__item.calendar-week-day__item--colored-bg.calendar-week-day__item--warning {
38554
+ --item-bg-color: var(--color-warning-translucent);
38555
+ --item-fg-color: var(--color-warning-text);
38556
+ --item-border-color: var(--color-warning-highlight); }
38557
+ .calendar-week-day__item.calendar-week-day__item--colored-bg.calendar-week-day__item--highlight {
38558
+ --item-bg-color: var(--color-highlight-translucent);
38559
+ --item-fg-color: var(--color-highlight-text);
38560
+ --item-border-color: var(--color-highlight-highlight); }
38561
+
38562
+ .calendar-week-day__item--selected {
38563
+ box-shadow: var(--sd-shadow__item--selected); }
38564
+
38565
+ .calendar-week-day__item--clickable:hover {
38566
+ cursor: pointer;
38567
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1); }
38568
+
38569
+ .calendar-week-day__item--clickable:active {
38570
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.12); }
38571
+
38572
+ .calendar-week-day__item--disabled {
38573
+ pointer-events: none;
38574
+ opacity: 0.7; }
38575
+
38576
+ .calendar-week-day__item--hidden {
38577
+ pointer-events: none;
38578
+ opacity: 0 !important; }
38579
+
38580
+ .calendar-week-day__container {
38581
+ display: grid;
38582
+ grid-template-columns: 1fr;
38583
+ grid-template-rows: 1fr;
38584
+ gap: var(--gap-0-5); }
38585
+ .calendar-week-day__container .calendar-week-day__item {
38586
+ flex-grow: 1; }
38587
+
38588
+ .calendar-user-week-row {
38589
+ display: grid;
38590
+ grid-template-columns: repeat(8, 1fr);
38591
+ grid-template-rows: 1fr;
38592
+ gap: var(--gap-1); }
38593
+
38321
38594
  .dropdown {
38322
38595
  position: relative;
38323
38596
  display: inline-block;
@@ -40795,14 +41068,26 @@ textarea.sd-media-carousel__media-title {
40795
41068
  flex-wrap: nowrap; }
40796
41069
 
40797
41070
  .sd-check-button__group--left, .sd-check-button__group--start {
40798
- margin-inline-end: auto; }
41071
+ margin-inline-end: auto;
41072
+ justify-content: flex-start; }
40799
41073
 
40800
41074
  .sd-check-button__group--right, .sd-check-button__group--end {
40801
- margin-inline-start: auto; }
41075
+ margin-inline-start: auto;
41076
+ justify-content: flex-end; }
41077
+
41078
+ .sd-check-button__group--vertical {
41079
+ flex-direction: column;
41080
+ align-items: flex-start; }
41081
+ .sd-check-button__group--vertical .sd-check-button.sd-check-button--native {
41082
+ align-self: stretch; }
41083
+ .sd-check-button__group--vertical .sd-check-button.sd-check-button--native .sd-check-button__text-label {
41084
+ text-align: left;
41085
+ justify-content: flex-start; }
40802
41086
 
40803
41087
  .sd-check-button__group--center {
40804
41088
  margin-inline-start: auto;
40805
- margin-inline-end: auto; }
41089
+ margin-inline-end: auto;
41090
+ justify-content: center; }
40806
41091
 
40807
41092
  .sd-check-button__group--inline {
40808
41093
  margin-inline-start: 0;
@@ -53857,14 +54142,26 @@ i.sd-sidetab-menu__helper-icon {
53857
54142
  flex-wrap: nowrap; }
53858
54143
 
53859
54144
  .sd-check-button__group--left, .sd-check-button__group--start {
53860
- margin-inline-end: auto; }
54145
+ margin-inline-end: auto;
54146
+ justify-content: flex-start; }
53861
54147
 
53862
54148
  .sd-check-button__group--right, .sd-check-button__group--end {
53863
- margin-inline-start: auto; }
54149
+ margin-inline-start: auto;
54150
+ justify-content: flex-end; }
54151
+
54152
+ .sd-check-button__group--vertical {
54153
+ flex-direction: column;
54154
+ align-items: flex-start; }
54155
+ .sd-check-button__group--vertical .sd-check-button.sd-check-button--native {
54156
+ align-self: stretch; }
54157
+ .sd-check-button__group--vertical .sd-check-button.sd-check-button--native .sd-check-button__text-label {
54158
+ text-align: left;
54159
+ justify-content: flex-start; }
53864
54160
 
53865
54161
  .sd-check-button__group--center {
53866
54162
  margin-inline-start: auto;
53867
- margin-inline-end: auto; }
54163
+ margin-inline-end: auto;
54164
+ justify-content: center; }
53868
54165
 
53869
54166
  .sd-check-button__group--inline {
53870
54167
  margin-inline-start: 0;