@qrsln/lootstrap 21.12.1-beta.0 → 21.12.27-beta.1

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 (38) hide show
  1. package/dist/css/lootstrap.css +1413 -495
  2. package/dist/css/lootstrap.css.map +1 -1
  3. package/dist/css/lootstrap.min.css +3 -3
  4. package/dist/css/test.css.map +1 -1
  5. package/package.json +5 -5
  6. package/scss/Abstracts/Mixins/_color.scss +15 -7
  7. package/scss/Abstracts/_variables.scss +3 -0
  8. package/scss/Architecture/Components/TODO/_tables.scss +21 -0
  9. package/scss/Architecture/Components/_alert.scss +2 -5
  10. package/scss/Architecture/Components/_breadcrumb.scss +0 -4
  11. package/scss/Architecture/Components/_button-group.scss +55 -0
  12. package/scss/Architecture/Components/_buttons.scss +62 -52
  13. package/scss/Architecture/Components/_calendar.scss +0 -4
  14. package/scss/Architecture/Components/_card.scss +6 -5
  15. package/scss/Architecture/Components/_dialog.scss +0 -4
  16. package/scss/Architecture/Components/_list.scss +151 -0
  17. package/scss/Architecture/Components/_nav.scss +89 -0
  18. package/scss/Architecture/Components/_pagination.scss +2 -6
  19. package/scss/Architecture/Components/_progress.scss +0 -4
  20. package/scss/Architecture/Components/_rating.scss +0 -4
  21. package/scss/Architecture/Components/_timeline.scss +3 -6
  22. package/scss/Architecture/Components/_timer.scss +0 -4
  23. package/scss/Architecture/Components/_toasts.scss +0 -4
  24. package/scss/Architecture/Forms/_checkboxes.scss +1 -0
  25. package/scss/Architecture/Forms/_input-fields.scss +279 -103
  26. package/scss/Architecture/Forms/_selects.scss +118 -0
  27. package/scss/Architecture/Layout/_grid.scss +0 -47
  28. package/scss/Architecture/Utils/_color.scss +13 -94
  29. package/scss/Architecture/Utils/_filters.scss +3 -14
  30. package/scss/Architecture/Utils/_spacing.scss +9 -59
  31. package/scss/Architecture/Utils/_utilities.scss +10 -27
  32. package/scss/Architecture/__dir-components.scss +18 -3
  33. package/scss/Architecture/__dir-forms.scss +1 -0
  34. package/scss/Architecture/_theme.scss +8 -44
  35. package/scss/_header.scss +2 -2
  36. package/scss/Architecture/Components/TODO/_button-group.scss +0 -7
  37. package/scss/Architecture/Components/TODO/_list-group.scss +0 -7
  38. package/scss/Architecture/Components/TODO/_nav.scss +0 -7
@@ -1,8 +1,8 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * CSS Compiled on: 2021-12-01
3
+ * CSS Compiled on: 2021-12-27
4
4
  *
5
- * Lootstrap v21.12.1-beta.0 (https://github.com/krsln/Lootstrap/)
5
+ * Lootstrap v21.12.27-beta.1 (https://github.com/krsln/Lootstrap/)
6
6
  * Copyright 2021 Qrsln.
7
7
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
8
8
  */
@@ -5517,9 +5517,6 @@
5517
5517
  display: flex;
5518
5518
  position: relative;
5519
5519
  overflow: hidden;
5520
- font-family: var(--ls-font);
5521
- font-size: var(--ls-font-size);
5522
- font-weight: var(--ls-font-weight);
5523
5520
  color: var(--ls-alert-fg-darkest,var(--ls-fg-darkest));
5524
5521
  background-color: var(--ls-alert-bg-darkest,var(--ls-bg-darkest));
5525
5522
  border: 1px solid var(--ls-alert-border-color,var(--ls-border-color));
@@ -5532,7 +5529,7 @@
5532
5529
  .Alert.Alert-outline {
5533
5530
  color: var(--ls-alert-fg-lightest,var(--ls-fg-lightest));
5534
5531
  background-color: var(--ls-alert-bg-lightest,var(--ls-bg-lightest));
5535
- border: .125rem solid var(--ls-alert-bg-darkest,var(--ls-bg-darkest))
5532
+ border: 1px solid var(--ls-alert-bg-darkest,var(--ls-bg-darkest))
5536
5533
  }
5537
5534
  .Alert .Alert-icon {
5538
5535
  display: flex;
@@ -5575,9 +5572,6 @@
5575
5572
  display: flex;
5576
5573
  position: relative;
5577
5574
  overflow: hidden;
5578
- font-family: var(--ls-font);
5579
- font-size: var(--ls-font-size);
5580
- font-weight: var(--ls-font-weight);
5581
5575
  color: var(--ls-fg-light);
5582
5576
  background-color: var(--ls-bg-light);
5583
5577
  border: 1px solid var(--ls-border-color);
@@ -5706,13 +5700,50 @@
5706
5700
  .Btn-close-pure:after {
5707
5701
  transform: translate(-50%,-50%) rotate(-45deg)
5708
5702
  }
5703
+ .Btn-group,
5704
+ .Btn-group-vertical {
5705
+ position: relative;
5706
+ display: inline-flex;
5707
+ vertical-align: middle
5708
+ }
5709
+ .Btn-group > .Btn,
5710
+ .Btn-group-vertical > .Btn {
5711
+ position: relative;
5712
+ flex: 1 1 auto
5713
+ }
5714
+ .Btn-group > .Btn-check:checked + .Btn,
5715
+ .Btn-group > .Btn-check:focus + .Btn,
5716
+ .Btn-group > .Btn.active,
5717
+ .Btn-group > .Btn:active,
5718
+ .Btn-group > .Btn:focus,
5719
+ .Btn-group > .Btn:hover,
5720
+ .Btn-group-vertical > .Btn-check:checked + .Btn,
5721
+ .Btn-group-vertical > .Btn-check:focus + .Btn,
5722
+ .Btn-group-vertical > .Btn.active,
5723
+ .Btn-group-vertical > .Btn:active,
5724
+ .Btn-group-vertical > .Btn:focus,
5725
+ .Btn-group-vertical > .Btn:hover {
5726
+ z-index: 1
5727
+ }
5728
+ .Btn-group > .Btn-group:not(:first-child),
5729
+ .Btn-group > .Btn:not(:first-child) {
5730
+ margin-left: -1px
5731
+ }
5732
+ .Btn-group > .Btn-group:not(:last-child) > .Btn,
5733
+ .Btn-group > .Btn:not(:last-child):not(.dropdown-toggle) {
5734
+ border-top-right-radius: 0;
5735
+ border-bottom-right-radius: 0
5736
+ }
5737
+ .Btn-group > .Btn-group:not(:first-child) > .Btn,
5738
+ .Btn-group > .Btn:nth-child(n+3),
5739
+ .Btn-group > :not(.Btn-check) + .Btn {
5740
+ border-top-left-radius: 0;
5741
+ border-bottom-left-radius: 0
5742
+ }
5709
5743
  .Btn {
5710
5744
  position: relative;
5711
5745
  display: inline-block;
5712
- font-family: var(--ls-font);
5713
- font-size: var(--ls-font-size);
5714
- font-weight: var(--ls-font-weight);
5715
- color: var(--ls-fg-light);
5746
+ color: var(--ls-btn-fg-light,var(--ls-fg-light));
5716
5747
  background-color: transparent;
5717
5748
  border: 1px solid transparent;
5718
5749
  text-align: center;
@@ -5730,10 +5761,10 @@
5730
5761
  .Btn:focus,
5731
5762
  .Btn:hover {
5732
5763
  outline: 0!important;
5733
- box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06)
5764
+ box-shadow: 0 1px 1px -1px rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.18),0 2px 2px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.12),0 4px 6px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.06)
5734
5765
  }
5735
5766
  .Btn:checked {
5736
- box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06),0 0 1px 0 rgba(var(--ls-shadow-color),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color),.06) inset
5767
+ box-shadow: 0 1px 1px -1px rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.18),0 2px 2px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.12),0 4px 6px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.06),0 0 1px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.18) inset,0 0 2px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.12) inset,0 0 6px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.06) inset
5737
5768
  }
5738
5769
  .Btn-link {
5739
5770
  background: 0 0;
@@ -5749,6 +5780,39 @@
5749
5780
  .Btn-round:before {
5750
5781
  border-radius: 50rem!important
5751
5782
  }
5783
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]) {
5784
+ color: var(--ls-btn-fg-darkest,var(--ls-fg-darkest));
5785
+ background: var(--ls-btn-bg-darkest,var(--ls-bg-darkest));
5786
+ border-color: var(--ls-btn-border-color,var(--ls-border-color))
5787
+ }
5788
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]):focus,
5789
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]):hover {
5790
+ color: var(--ls-btn-fg-dark,var(--ls-fg-dark));
5791
+ background-color: var(--ls-btn-bg-dark,var(--ls-bg-dark));
5792
+ border-color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest))
5793
+ }
5794
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]).Border-fx-center,
5795
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]).Border-fx-draw,
5796
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]).Border-fx-meet,
5797
+ .Btn[class*=Btn-]:not([class*=Btn-outline-]).Ripple {
5798
+ --ls-effect-color: var(--ls-btn-fg-dark, var(--ls-fg-dark))
5799
+ }
5800
+ .Btn[class*=Btn-outline-] {
5801
+ color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest));
5802
+ background-color: inherit;
5803
+ border-color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest))
5804
+ }
5805
+ .Btn[class*=Btn-outline-]:hover {
5806
+ color: var(--ls-btn-fg-dark,var(--ls-fg-dark));
5807
+ background-color: var(--ls-btn-bg-dark,var(--ls-bg-dark));
5808
+ border-color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest))
5809
+ }
5810
+ .Btn[class*=Btn-outline-].Border-fx-center,
5811
+ .Btn[class*=Btn-outline-].Border-fx-draw,
5812
+ .Btn[class*=Btn-outline-].Border-fx-meet,
5813
+ .Btn[class*=Btn-outline-].Ripple {
5814
+ --ls-effect-color: var(--ls-btn-fg-dark, var(--ls-fg-dark))
5815
+ }
5752
5816
  .Ripple {
5753
5817
  position: relative;
5754
5818
  overflow: hidden;
@@ -5763,7 +5827,7 @@
5763
5827
  top: 0;
5764
5828
  left: 0;
5765
5829
  pointer-events: none;
5766
- background-image: radial-gradient(circle,var(--ls-effect-color,var(--ls-fg-active)) 10%,transparent 10.01%);
5830
+ background-image: radial-gradient(circle,var(--ls-effect-color,var(--ls-btn-fg-active,var(--ls-fg-active))) 10%,transparent 10.01%);
5767
5831
  background-repeat: no-repeat;
5768
5832
  background-position: 50%;
5769
5833
  transform: scale(10,10);
@@ -5803,14 +5867,14 @@
5803
5867
  height: 100%
5804
5868
  }
5805
5869
  .Border-fx-draw:hover:before {
5806
- border-top-color: var(--ls-effect-color,var(--ls-border-color));
5807
- border-right-color: var(--ls-effect-color,var(--ls-border-color));
5808
- transition: width .25s ease-out,height .25s ease-out .25s
5870
+ border-top-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5871
+ border-right-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5872
+ transition: width .1s ease-out,height .1s ease-out .1s
5809
5873
  }
5810
5874
  .Border-fx-draw:hover:after {
5811
- border-bottom-color: var(--ls-effect-color,var(--ls-border-color));
5812
- border-left-color: var(--ls-effect-color,var(--ls-border-color));
5813
- transition: border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s
5875
+ border-bottom-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5876
+ border-left-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5877
+ transition: border-color 0s ease-out .2s,width .1s ease-out .2s,height .1s ease-out .3s
5814
5878
  }
5815
5879
  .Border-fx-meet {
5816
5880
  position: relative;
@@ -5838,7 +5902,7 @@
5838
5902
  }
5839
5903
  .Border-fx-meet:hover:after,
5840
5904
  .Border-fx-meet:hover:before {
5841
- border-color: var(--ls-effect-color,var(--ls-border-color));
5905
+ border-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5842
5906
  transition: border-color 0s,width .25s,height .25s;
5843
5907
  width: 100%;
5844
5908
  height: 100%
@@ -5867,13 +5931,13 @@
5867
5931
  transform-origin: center
5868
5932
  }
5869
5933
  .Border-fx-center:before {
5870
- border-top: 2px solid var(--ls-effect-color,var(--ls-border-color));
5871
- border-bottom: 2px solid var(--ls-effect-color,var(--ls-border-color));
5934
+ border-top: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5935
+ border-bottom: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5872
5936
  transform: scale3d(0,1,1)
5873
5937
  }
5874
5938
  .Border-fx-center:after {
5875
- border-left: 2px solid var(--ls-effect-color,var(--ls-border-color));
5876
- border-right: 2px solid var(--ls-effect-color,var(--ls-border-color));
5939
+ border-left: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5940
+ border-right: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
5877
5941
  transform: scale3d(1,0,1)
5878
5942
  }
5879
5943
  .Border-fx-center:hover:after,
@@ -5881,293 +5945,10 @@
5881
5945
  transform: scale3d(1,1,1);
5882
5946
  transition: transform .5s
5883
5947
  }
5884
- .Btn-primary {
5885
- color: #fff;
5886
- background-color: #4712af;
5887
- border-color: #5015c6
5888
- }
5889
- .Btn-primary:focus,
5890
- .Btn-primary:hover {
5891
- border-color: #3d1098!important;
5892
- background: #3d1098!important
5893
- }
5894
- .Btn-primary.Border-fx-center,
5895
- .Btn-primary.Border-fx-draw,
5896
- .Btn-primary.Border-fx-meet,
5897
- .Btn-primary.Ripple {
5898
- --ls-effect-color: white
5899
- }
5900
- .Btn-outline-primary {
5901
- color: #4712af;
5902
- border-color: #5015c6
5903
- }
5904
- .Btn-outline-primary:hover {
5905
- color: #fff;
5906
- background-color: #4712af;
5907
- border-color: #3d1098
5908
- }
5909
- .Btn-outline-primary.Border-fx-center,
5910
- .Btn-outline-primary.Border-fx-draw,
5911
- .Btn-outline-primary.Border-fx-meet,
5912
- .Btn-outline-primary.Ripple {
5913
- --ls-effect-color: white
5914
- }
5915
- .Btn-secondary {
5916
- color: #fff;
5917
- background-color: #6d767e;
5918
- border-color: #79838b
5919
- }
5920
- .Btn-secondary:focus,
5921
- .Btn-secondary:hover {
5922
- border-color: #616970!important;
5923
- background: #616970!important
5924
- }
5925
- .Btn-secondary.Border-fx-center,
5926
- .Btn-secondary.Border-fx-draw,
5927
- .Btn-secondary.Border-fx-meet,
5928
- .Btn-secondary.Ripple {
5929
- --ls-effect-color: white
5930
- }
5931
- .Btn-outline-secondary {
5932
- color: #6d767e;
5933
- border-color: #79838b
5934
- }
5935
- .Btn-outline-secondary:hover {
5936
- color: #fff;
5937
- background-color: #6d767e;
5938
- border-color: #616970
5939
- }
5940
- .Btn-outline-secondary.Border-fx-center,
5941
- .Btn-outline-secondary.Border-fx-draw,
5942
- .Btn-outline-secondary.Border-fx-meet,
5943
- .Btn-outline-secondary.Ripple {
5944
- --ls-effect-color: white
5945
- }
5946
- .Btn-success {
5947
- color: #fff;
5948
- background-color: #29a847;
5949
- border-color: #2ebd4f
5950
- }
5951
- .Btn-success:focus,
5952
- .Btn-success:hover {
5953
- border-color: #24943e!important;
5954
- background: #24943e!important
5955
- }
5956
- .Btn-success.Border-fx-center,
5957
- .Btn-success.Border-fx-draw,
5958
- .Btn-success.Border-fx-meet,
5959
- .Btn-success.Ripple {
5960
- --ls-effect-color: white
5961
- }
5962
- .Btn-outline-success {
5963
- color: #29a847;
5964
- border-color: #2ebd4f
5965
- }
5966
- .Btn-outline-success:hover {
5967
- color: #fff;
5968
- background-color: #29a847;
5969
- border-color: #24943e
5970
- }
5971
- .Btn-outline-success.Border-fx-center,
5972
- .Btn-outline-success.Border-fx-draw,
5973
- .Btn-outline-success.Border-fx-meet,
5974
- .Btn-outline-success.Ripple {
5975
- --ls-effect-color: white
5976
- }
5977
- .Btn-info {
5978
- color: #fff;
5979
- background-color: #0367d8;
5980
- border-color: #0472f1
5981
- }
5982
- .Btn-info:focus,
5983
- .Btn-info:hover {
5984
- border-color: #035bbf!important;
5985
- background: #035bbf!important
5986
- }
5987
- .Btn-info.Border-fx-center,
5988
- .Btn-info.Border-fx-draw,
5989
- .Btn-info.Border-fx-meet,
5990
- .Btn-info.Ripple {
5991
- --ls-effect-color: white
5992
- }
5993
- .Btn-outline-info {
5994
- color: #0367d8;
5995
- border-color: #0472f1
5996
- }
5997
- .Btn-outline-info:hover {
5998
- color: #fff;
5999
- background-color: #0367d8;
6000
- border-color: #035bbf
6001
- }
6002
- .Btn-outline-info.Border-fx-center,
6003
- .Btn-outline-info.Border-fx-draw,
6004
- .Btn-outline-info.Border-fx-meet,
6005
- .Btn-outline-info.Ripple {
6006
- --ls-effect-color: white
6007
- }
6008
- .Btn-warning {
6009
- color: #fff;
6010
- background-color: #ffc105;
6011
- border-color: #ffc71f
6012
- }
6013
- .Btn-warning:focus,
6014
- .Btn-warning:hover {
6015
- border-color: #ebb000!important;
6016
- background: #ebb000!important
6017
- }
6018
- .Btn-warning.Border-fx-center,
6019
- .Btn-warning.Border-fx-draw,
6020
- .Btn-warning.Border-fx-meet,
6021
- .Btn-warning.Ripple {
6022
- --ls-effect-color: white
6023
- }
6024
- .Btn-outline-warning {
6025
- color: #ffc105;
6026
- border-color: #ffc71f
6027
- }
6028
- .Btn-outline-warning:hover {
6029
- color: #fff;
6030
- background-color: #ffc105;
6031
- border-color: #ebb000
6032
- }
6033
- .Btn-outline-warning.Border-fx-center,
6034
- .Btn-outline-warning.Border-fx-draw,
6035
- .Btn-outline-warning.Border-fx-meet,
6036
- .Btn-outline-warning.Ripple {
6037
- --ls-effect-color: white
6038
- }
6039
- .Btn-danger {
6040
- color: #fff;
6041
- background-color: #d73c4c;
6042
- border-color: #db515f
6043
- }
6044
- .Btn-danger:focus,
6045
- .Btn-danger:hover {
6046
- border-color: #cf2a3b!important;
6047
- background: #cf2a3b!important
6048
- }
6049
- .Btn-danger.Border-fx-center,
6050
- .Btn-danger.Border-fx-draw,
6051
- .Btn-danger.Border-fx-meet,
6052
- .Btn-danger.Ripple {
6053
- --ls-effect-color: white
6054
- }
6055
- .Btn-outline-danger {
6056
- color: #d73c4c;
6057
- border-color: #db515f
6058
- }
6059
- .Btn-outline-danger:hover {
6060
- color: #fff;
6061
- background-color: #d73c4c;
6062
- border-color: #cf2a3b
6063
- }
6064
- .Btn-outline-danger.Border-fx-center,
6065
- .Btn-outline-danger.Border-fx-draw,
6066
- .Btn-outline-danger.Border-fx-meet,
6067
- .Btn-outline-danger.Ripple {
6068
- --ls-effect-color: white
6069
- }
6070
- .Btn-light {
6071
- color: #000;
6072
- background-color: #f9fafb;
6073
- border-color: #fff
6074
- }
6075
- .Btn-light:focus,
6076
- .Btn-light:hover {
6077
- border-color: #eaedf1!important;
6078
- background: #eaedf1!important
6079
- }
6080
- .Btn-light.Border-fx-center,
6081
- .Btn-light.Border-fx-draw,
6082
- .Btn-light.Border-fx-meet,
6083
- .Btn-light.Ripple {
6084
- --ls-effect-color: black
6085
- }
6086
- .Btn-outline-light {
6087
- color: #f9fafb;
6088
- border-color: #fff;
6089
- color: inherit
6090
- }
6091
- .Btn-outline-light:hover {
6092
- color: #000;
6093
- background-color: #f9fafb;
6094
- border-color: #eaedf1
6095
- }
6096
- .Btn-outline-light.Border-fx-center,
6097
- .Btn-outline-light.Border-fx-draw,
6098
- .Btn-outline-light.Border-fx-meet,
6099
- .Btn-outline-light.Ripple {
6100
- --ls-effect-color: black
6101
- }
6102
- .Btn-dark {
6103
- color: #fff;
6104
- background-color: #353b41;
6105
- border-color: #40474f
6106
- }
6107
- .Btn-dark:focus,
6108
- .Btn-dark:hover {
6109
- border-color: #292e32!important;
6110
- background: #292e32!important
6111
- }
6112
- .Btn-dark.Border-fx-center,
6113
- .Btn-dark.Border-fx-draw,
6114
- .Btn-dark.Border-fx-meet,
6115
- .Btn-dark.Ripple {
6116
- --ls-effect-color: white
6117
- }
6118
- .Btn-outline-dark {
6119
- color: #353b41;
6120
- border-color: #40474f
6121
- }
6122
- .Btn-outline-dark:hover {
6123
- color: #fff;
6124
- background-color: #353b41;
6125
- border-color: #292e32
6126
- }
6127
- .Btn-outline-dark.Border-fx-center,
6128
- .Btn-outline-dark.Border-fx-draw,
6129
- .Btn-outline-dark.Border-fx-meet,
6130
- .Btn-outline-dark.Ripple {
6131
- --ls-effect-color: white
6132
- }
6133
- .Btn-night {
6134
- color: #fff;
6135
- background-color: #000;
6136
- border-color: #0d0d0d
6137
- }
6138
- .Btn-night:focus,
6139
- .Btn-night:hover {
6140
- border-color: #000!important;
6141
- background: #000!important
6142
- }
6143
- .Btn-night.Border-fx-center,
6144
- .Btn-night.Border-fx-draw,
6145
- .Btn-night.Border-fx-meet,
6146
- .Btn-night.Ripple {
6147
- --ls-effect-color: white
6148
- }
6149
- .Btn-outline-night {
6150
- color: #000;
6151
- border-color: #0d0d0d
6152
- }
6153
- .Btn-outline-night:hover {
6154
- color: #fff;
6155
- background-color: #000;
6156
- border-color: #000
6157
- }
6158
- .Btn-outline-night.Border-fx-center,
6159
- .Btn-outline-night.Border-fx-draw,
6160
- .Btn-outline-night.Border-fx-meet,
6161
- .Btn-outline-night.Ripple {
6162
- --ls-effect-color: white
6163
- }
6164
5948
  .Calendar {
6165
5949
  display: block;
6166
5950
  position: relative;
6167
5951
  overflow: hidden;
6168
- font-family: var(--ls-font);
6169
- font-size: var(--ls-font-size);
6170
- font-weight: var(--ls-font-weight);
6171
5952
  color: var(--ls-calendar-fg-light,var(--ls-fg-light));
6172
5953
  background-color: var(--ls-calendar-bg-light,var(--ls-bg-light));
6173
5954
  border: 1px solid var(--ls-calendar-border-color,var(--ls-border-color));
@@ -6270,9 +6051,6 @@
6270
6051
  display: block;
6271
6052
  position: relative;
6272
6053
  overflow: visible;
6273
- font-family: var(--ls-font);
6274
- font-size: var(--ls-font-size);
6275
- font-weight: var(--ls-font-weight);
6276
6054
  color: var(--ls-card-fg-light,var(--ls-fg-light));
6277
6055
  background-color: var(--ls-card-bg-light,var(--ls-bg-light));
6278
6056
  border: 1px solid var(--ls-card-border-color,var(--ls-border-color));
@@ -6285,7 +6063,9 @@
6285
6063
  }
6286
6064
  .Card .Card-img {
6287
6065
  position: relative;
6288
- overflow: hidden
6066
+ overflow: hidden;
6067
+ border-top-left-radius: .5rem;
6068
+ border-top-right-radius: .5rem
6289
6069
  }
6290
6070
  .Card .Card-footer,
6291
6071
  .Card .Card-header {
@@ -6607,9 +6387,6 @@
6607
6387
  display: block;
6608
6388
  position: relative;
6609
6389
  overflow: hidden;
6610
- font-family: var(--ls-font);
6611
- font-size: var(--ls-font-size);
6612
- font-weight: var(--ls-font-weight);
6613
6390
  color: var(--ls-fg-light);
6614
6391
  background-color: var(--ls-bg-light);
6615
6392
  border: 1px solid var(--ls-border-color);
@@ -6667,6 +6444,94 @@
6667
6444
  border-top: 1px solid var(--ls-border-color);
6668
6445
  border-bottom: 1px solid var(--ls-border-color)
6669
6446
  }
6447
+ .List {
6448
+ display: flex;
6449
+ flex-direction: column;
6450
+ padding-left: 0;
6451
+ margin-bottom: 0;
6452
+ border-radius: .25rem
6453
+ }
6454
+ .List.List-horizontal {
6455
+ flex-direction: row
6456
+ }
6457
+ .List.List-numbered {
6458
+ list-style-type: none;
6459
+ counter-reset: section
6460
+ }
6461
+ .List.List-numbered > li::before {
6462
+ content: counters(section, ".") ". ";
6463
+ counter-increment: section
6464
+ }
6465
+ .List.List-flush {
6466
+ border-radius: 0
6467
+ }
6468
+ .List.List-flush > .List-item {
6469
+ border-width: 0 0 1px
6470
+ }
6471
+ .List.List-flush > .List-item:last-child {
6472
+ border-bottom-width: 0
6473
+ }
6474
+ .List:not(.List-horizontal) .List-item:first-child {
6475
+ border-top-left-radius: .25rem;
6476
+ border-top-right-radius: .25rem
6477
+ }
6478
+ .List:not(.List-horizontal) .List-item:last-child {
6479
+ border-bottom-left-radius: .25rem;
6480
+ border-bottom-right-radius: .25rem
6481
+ }
6482
+ .List:not(.List-horizontal) .List-item + .List-item {
6483
+ border-top-width: 0
6484
+ }
6485
+ .List.List-horizontal .List-item {
6486
+ border-radius: 0
6487
+ }
6488
+ .List.List-horizontal .List-item:first-child {
6489
+ border-top-left-radius: .25rem;
6490
+ border-bottom-left-radius: .25rem
6491
+ }
6492
+ .List.List-horizontal .List-item:last-child {
6493
+ border-top-right-radius: .25rem;
6494
+ border-bottom-right-radius: .25rem
6495
+ }
6496
+ .List.List-horizontal .List-item + .List-item {
6497
+ border-left-width: 0
6498
+ }
6499
+ .List-item-action {
6500
+ width: 100%;
6501
+ text-align: inherit
6502
+ }
6503
+ .List-item-action:focus,
6504
+ .List-item-action:hover {
6505
+ z-index: 1;
6506
+ text-decoration: none;
6507
+ color: var(--ls-lst-fg-lightest,var(--ls-fg-lightest));
6508
+ background-color: var(--ls-lst-bg-lightest,var(--ls-bg-lightest))
6509
+ }
6510
+ .List-item-action:active {
6511
+ color: var(--ls-lst-fg-dark,var(--ls-fg-dark));
6512
+ background-color: var(--ls-lst-bg-dark,var(--ls-bg-dark))
6513
+ }
6514
+ .List-item {
6515
+ position: relative;
6516
+ display: block;
6517
+ padding: .75rem 1.25rem;
6518
+ text-decoration: none;
6519
+ color: var(--ls-lst-fg-light,var(--ls-fg-light));
6520
+ background-color: var(--ls-lst-bg-light,var(--ls-bg-light));
6521
+ border: 1px solid var(--ls-lst-border-color,var(--ls-border-color))
6522
+ }
6523
+ .List-item.Disabled,
6524
+ .List-item:disabled {
6525
+ pointer-events: none;
6526
+ color: var(--ls-lst-fg-muted,var(--ls-fg-muted));
6527
+ background-color: var(--ls-lst-bg-lightest,var(--ls-bg-lightest))
6528
+ }
6529
+ .List-item.Active {
6530
+ z-index: 2;
6531
+ color: var(--ls-lst-fg-active,var(--ls-fg-active));
6532
+ background-color: var(--ls-lst-bg-active,var(--ls-bg-active));
6533
+ border-color: var(--ls-lst-bg-active,var(--ls-bg-active))
6534
+ }
6670
6535
  .Loader,
6671
6536
  .Timer-svg {
6672
6537
  display: flex;
@@ -6724,13 +6589,74 @@
6724
6589
  stroke-dasharray: 0 100
6725
6590
  }
6726
6591
  }
6592
+ .Nav {
6593
+ display: flex;
6594
+ flex-wrap: wrap;
6595
+ padding-left: 0;
6596
+ margin-bottom: 0;
6597
+ list-style: none
6598
+ }
6599
+ .Nav-link {
6600
+ display: block;
6601
+ padding: .5rem 1rem;
6602
+ color: #0d6efd;
6603
+ text-decoration: none;
6604
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
6605
+ }
6606
+ .Nav-link:focus,
6607
+ .Nav-link:hover {
6608
+ color: var(--ls-fg-lightest);
6609
+ background-color: var(--ls-bg-lightest)
6610
+ }
6611
+ .Nav-link.Active {
6612
+ color: var(--ls-fg-active);
6613
+ background-color: var(--ls-bg-active)
6614
+ }
6615
+ .Nav-link.Disabled {
6616
+ color: var(--ls-fg-muted);
6617
+ pointer-events: none;
6618
+ cursor: default
6619
+ }
6620
+ .Nav-tabs {
6621
+ border-bottom: 1px solid var(--ls-border-color)
6622
+ }
6623
+ .Nav-tabs .Nav-link {
6624
+ margin-bottom: -1px;
6625
+ background: 0 0;
6626
+ border: 1px solid transparent;
6627
+ border-top-left-radius: .25rem;
6628
+ border-top-right-radius: .25rem
6629
+ }
6630
+ .Nav-tabs .Nav-link:focus,
6631
+ .Nav-tabs .Nav-link:hover {
6632
+ border-color: var(--ls-border-color);
6633
+ isolation: isolate
6634
+ }
6635
+ .Nav-tabs .Nav-link.Disabled {
6636
+ color: var(--ls-fg-muted);
6637
+ background-color: transparent;
6638
+ border-color: transparent
6639
+ }
6640
+ .Nav-tabs .Nav-item.Show .Nav-link,
6641
+ .Nav-tabs .Nav-link.Active {
6642
+ color: var(--ls-fg-light);
6643
+ background-color: var(--ls-bg-light);
6644
+ border-color: var(--ls-border-color) var(--ls-border-color) var(--ls-bg-light)
6645
+ }
6646
+ .Nav-pills .Nav-link {
6647
+ background: 0 0;
6648
+ border: 0;
6649
+ border-radius: .25rem
6650
+ }
6651
+ .Nav-pills .Nav-link.Active,
6652
+ .Nav-pills .Show > .Nav-link {
6653
+ color: var(--ls-fg-active);
6654
+ background-color: var(--ls-bg-active)
6655
+ }
6727
6656
  .Pagination {
6728
6657
  display: flex;
6729
6658
  position: relative;
6730
6659
  overflow: hidden;
6731
- font-family: var(--ls-font);
6732
- font-size: var(--ls-font-size);
6733
- font-weight: var(--ls-font-weight);
6734
6660
  color: var(--ls-fg-light);
6735
6661
  background-color: var(--ls-bg-light)
6736
6662
  }
@@ -6755,10 +6681,10 @@
6755
6681
  color: var(--ls-fg-dark);
6756
6682
  background-color: var(--ls-bg-dark)
6757
6683
  }
6758
- .Pagination .Square.disabled {
6684
+ .Pagination .Square.Disabled {
6759
6685
  color: var(--ls-fg-muted)
6760
6686
  }
6761
- .Pagination .Square.active {
6687
+ .Pagination .Square.Active {
6762
6688
  color: var(--ls-fg-active);
6763
6689
  background-color: var(--ls-bg-active);
6764
6690
  border-color: transparent;
@@ -6769,9 +6695,6 @@
6769
6695
  display: flex;
6770
6696
  position: relative;
6771
6697
  height: 1rem;
6772
- font-family: var(--ls-font);
6773
- font-size: var(--ls-font-size);
6774
- font-weight: var(--ls-font-weight);
6775
6698
  color: var(--ls-fg-lightest);
6776
6699
  background-color: var(--ls-bg-lightest);
6777
6700
  border: 1px solid var(--ls-border-color);
@@ -6815,10 +6738,7 @@
6815
6738
  display: flex;
6816
6739
  position: relative;
6817
6740
  overflow: visible;
6818
- cursor: pointer;
6819
- font-family: var(--ls-font);
6820
- font-size: var(--ls-font-size);
6821
- font-weight: var(--ls-font-weight)
6741
+ cursor: pointer
6822
6742
  }
6823
6743
  .Rating .Square {
6824
6744
  border: none;
@@ -7085,9 +7005,6 @@
7085
7005
  display: block;
7086
7006
  position: relative;
7087
7007
  overflow: visible;
7088
- font-family: var(--ls-font);
7089
- font-size: var(--ls-font-size);
7090
- font-weight: var(--ls-font-weight);
7091
7008
  color: var(--ls-fg-light);
7092
7009
  background-color: var(--ls-bg-light);
7093
7010
  border: 1px solid var(--ls-border-color);
@@ -7132,7 +7049,8 @@
7132
7049
  color: var(--ls-fg-darkest);
7133
7050
  background-color: var(--ls-bg-darkest);
7134
7051
  border-radius: 50%;
7135
- box-shadow: 0 0 1px 0 rgba(var(--ls-shadow-color),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color),.06) inset
7052
+ box-shadow: 0 0 1px 0 rgba(var(--ls-shadow-color),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color),.06) inset;
7053
+ margin-bottom: 1rem
7136
7054
  }
7137
7055
  .Timeline .Timeline-item .Timeline-badge .Timeline-badge-inner * {
7138
7056
  display: block;
@@ -7143,7 +7061,7 @@
7143
7061
  min-width: 0;
7144
7062
  max-width: 100%;
7145
7063
  padding: 0;
7146
- margin: 0 0 0 1rem
7064
+ margin: 0 0 0 1.4rem
7147
7065
  }
7148
7066
  .Timeline .Timeline-item .Timeline-body .Card {
7149
7067
  border-top: 1px solid var(--ls-border-color)
@@ -7164,7 +7082,7 @@
7164
7082
  flex-direction: row-reverse
7165
7083
  }
7166
7084
  .Timeline .Timeline-item.Timeline-item-inverted .Timeline-body {
7167
- margin: 0 1rem 0 0
7085
+ margin: 0 1.4rem 0 0
7168
7086
  }
7169
7087
  @media (max-width:767px) {
7170
7088
  .Timeline .Timeline-item,
@@ -7183,9 +7101,6 @@
7183
7101
  position: relative;
7184
7102
  overflow: hidden;
7185
7103
  flex-wrap: wrap;
7186
- font-family: var(--ls-font);
7187
- font-size: var(--ls-font-size);
7188
- font-weight: var(--ls-font-weight);
7189
7104
  color: var(--ls-fg-light);
7190
7105
  background-color: var(--ls-bg-light);
7191
7106
  border: 1px solid var(--ls-border-color);
@@ -7241,9 +7156,6 @@
7241
7156
  display: block;
7242
7157
  position: relative;
7243
7158
  overflow: hidden;
7244
- font-family: var(--ls-font);
7245
- font-size: var(--ls-font-size);
7246
- font-weight: var(--ls-font-weight);
7247
7159
  border-top-left-radius: var(--ls-border-radius);
7248
7160
  border-top-right-radius: var(--ls-border-radius);
7249
7161
  border: 1px solid var(--ls-toast-border-color,var(--ls-border-color));
@@ -7284,6 +7196,40 @@
7284
7196
  .Toast .Progress .Progress-bar {
7285
7197
  background-color: var(--ls-toast-bg-active,var(--ls-bg-active))
7286
7198
  }
7199
+ .Alert,
7200
+ .Breadcrumb,
7201
+ .Btn,
7202
+ .Calendar,
7203
+ .Card,
7204
+ .Dialog,
7205
+ .List,
7206
+ .Pagination,
7207
+ .Progress,
7208
+ .Rating,
7209
+ .Timeline,
7210
+ .Timer,
7211
+ .Toast {
7212
+ font-family: var(--ls-font);
7213
+ font-size: var(--ls-font-size);
7214
+ font-weight: var(--ls-font-weight)
7215
+ }
7216
+ .Table {
7217
+ width: 100%;
7218
+ margin-bottom: 1rem;
7219
+ vertical-align: top;
7220
+ color: var(--ls-fg-light);
7221
+ background-color: var(--ls-bg-light);
7222
+ border-color: var(--ls-border-color)
7223
+ }
7224
+ .Table > tbody {
7225
+ vertical-align: inherit
7226
+ }
7227
+ .Table > thead {
7228
+ vertical-align: bottom
7229
+ }
7230
+ .Table > :not(:last-child) > :last-child > * {
7231
+ border-bottom-color: var(--ls-border-color)
7232
+ }
7287
7233
  .Form-check [type=checkbox] {
7288
7234
  position: absolute;
7289
7235
  opacity: 0;
@@ -7432,125 +7378,196 @@
7432
7378
  background-color: var(--ls-fg-muted);
7433
7379
  border-color: var(--ls-fg-muted)
7434
7380
  }
7435
- .Form-control-lg {
7436
- height: calc(1.5em + 1rem + 2px);
7437
- padding: .5rem 1rem;
7438
- font-size: 1.25rem;
7439
- line-height: 1.5;
7440
- border-radius: .3rem
7441
- }
7442
- .Form-control-sm {
7443
- height: calc(1.5em + .5rem + 2px);
7444
- padding: .25rem .5rem;
7445
- font-size: .875rem;
7446
- line-height: 1.5;
7447
- border-radius: .2rem
7448
- }
7449
7381
  .Form {
7450
7382
  position: relative;
7451
- margin-top: 1.5rem;
7452
- margin-bottom: 1.5rem
7383
+ margin: 1rem 0 1rem 0
7453
7384
  }
7454
- .Form input[type=date],
7455
- .Form input[type=datetime-local],
7456
7385
  .Form input[type=email],
7457
7386
  .Form input[type=number],
7458
7387
  .Form input[type=password],
7459
- .Form input[type=search-md],
7460
- .Form input[type=search],
7461
- .Form input[type=tel],
7462
7388
  .Form input[type=text],
7463
- .Form input[type=time],
7464
- .Form input[type=url],
7465
- .Form textarea.Textarea {
7466
- transition: all .3s;
7389
+ .Form textarea {
7390
+ width: 100%;
7391
+ padding: 5px 0;
7392
+ color: var(--ls-fg-light);
7393
+ background: var(--ls-bg-light);
7394
+ box-sizing: content-box;
7467
7395
  outline: 0;
7468
7396
  box-shadow: none;
7397
+ font-weight: 400;
7398
+ line-height: 1.5;
7469
7399
  border: none;
7470
- border-bottom: 1px solid #ced4da;
7471
7400
  border-radius: 0;
7472
- box-sizing: content-box;
7473
- background: 0 0
7401
+ border-bottom: 1px solid var(--ls-border-color);
7402
+ transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
7474
7403
  }
7475
- .Form input[type=date]:focus:not([readonly]),
7476
- .Form input[type=datetime-local]:focus:not([readonly]),
7477
- .Form input[type=email]:focus:not([readonly]),
7478
- .Form input[type=number]:focus:not([readonly]),
7479
- .Form input[type=password]:focus:not([readonly]),
7480
- .Form input[type=search-md]:focus:not([readonly]),
7481
- .Form input[type=search]:focus:not([readonly]),
7482
- .Form input[type=tel]:focus:not([readonly]),
7483
- .Form input[type=text]:focus:not([readonly]),
7484
- .Form input[type=time]:focus:not([readonly]),
7485
- .Form input[type=url]:focus:not([readonly]),
7486
- .Form textarea.Textarea:focus:not([readonly]) {
7487
- box-shadow: 0 1px 0 0 var(--ls-bg-active);
7488
- border-bottom: 1px solid var(--ls-bg-active)
7489
- }
7490
- .Form input[type=date]:focus:not([readonly]) + label,
7491
- .Form input[type=datetime-local]:focus:not([readonly]) + label,
7492
- .Form input[type=email]:focus:not([readonly]) + label,
7493
- .Form input[type=number]:focus:not([readonly]) + label,
7494
- .Form input[type=password]:focus:not([readonly]) + label,
7495
- .Form input[type=search-md]:focus:not([readonly]) + label,
7496
- .Form input[type=search]:focus:not([readonly]) + label,
7497
- .Form input[type=tel]:focus:not([readonly]) + label,
7498
- .Form input[type=text]:focus:not([readonly]) + label,
7499
- .Form input[type=time]:focus:not([readonly]) + label,
7500
- .Form input[type=url]:focus:not([readonly]) + label,
7501
- .Form textarea.Textarea:focus:not([readonly]) + label {
7502
- color: var(--ls-bg-active)
7404
+ .Form textarea {
7405
+ padding: 5px
7503
7406
  }
7504
- .Form .Form-control {
7505
- display: block;
7407
+ .Form select {
7506
7408
  width: 100%;
7507
- margin: 0 0 .5rem 0;
7409
+ color: var(--ls-fg-light);
7410
+ background: var(--ls-bg-light);
7411
+ outline: 0;
7412
+ border: none;
7508
7413
  border-radius: 0;
7509
- padding: .3rem 0 .55rem 0;
7510
- background-image: none;
7511
- background-color: transparent
7512
- }
7513
- .Form .Form-control:focus {
7514
- box-shadow: none;
7515
- background: 0 0
7516
- }
7517
- .Form .Form-control:disabled,
7518
- .Form .Form-control[readonly] {
7519
- border-bottom: 1px solid gray;
7520
- background-color: transparent
7414
+ border-bottom: 1px solid var(--ls-border-color)
7521
7415
  }
7522
7416
  .Form label {
7523
7417
  position: absolute;
7524
- top: .65rem;
7418
+ pointer-events: none;
7419
+ top: 0;
7525
7420
  left: 0;
7526
- transition: .2s ease-out;
7421
+ font-size: 1rem;
7422
+ color: var(--ls-fg-muted);
7527
7423
  cursor: text;
7528
- color: #757575
7424
+ transition: transform .2s ease-out,color .2s ease-out
7529
7425
  }
7530
- .Form label.active {
7531
- transform: translateY(-140%)
7426
+ .Form .Form-input:focus:not([readonly]),
7427
+ .Form .Textarea:focus:not([readonly]) {
7428
+ box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06);
7429
+ border-color: var(--ls-bg-active);
7430
+ color: var(--ls-fg-lightest);
7431
+ background: var(--ls-bg-lightest)
7532
7432
  }
7533
- .Form label {
7534
- font-size: 1rem
7433
+ .Form .Form-input:focus:not([readonly]) + label,
7434
+ .Form .Textarea:focus:not([readonly]) + label {
7435
+ color: var(--ls-bg-active)
7436
+ }
7437
+ .Form .Form-input:-moz-placeholder-shown ~ .Form-label, .Form .Textarea:-moz-placeholder-shown ~ .Form-label {
7438
+ transform: translateY(-80%)
7439
+ }
7440
+ .Form .Form-input:focus ~ .Form-label,
7441
+ .Form .Form-input:not(:required) ~ .Form-label,
7442
+ .Form .Form-input:placeholder-shown ~ .Form-label,
7443
+ .Form .Form-input:required:valid ~ .Form-label,
7444
+ .Form .Textarea:focus ~ .Form-label,
7445
+ .Form .Textarea:not(:required) ~ .Form-label,
7446
+ .Form .Textarea:placeholder-shown ~ .Form-label,
7447
+ .Form .Textarea:required:valid ~ .Form-label {
7448
+ transform: translateY(-80%)
7449
+ }
7450
+ .Form .Textarea {
7451
+ --ls-border-alpha: .3;
7452
+ line-height: 2em;
7453
+ background-image: linear-gradient(transparent,transparent calc(2em - 1px),hsla(var(--ls-border-color-h),var(--ls-border-color-s),var(--ls-border-color-l),var(--ls-border-alpha,1)) 0);
7454
+ background-size: 100% 2em
7455
+ }
7456
+ .Form .Textarea:focus:not([readonly]) {
7457
+ background-image: linear-gradient(transparent,transparent calc(2em - 1px),hsla(var(--ls-border-color-h),var(--ls-border-color-s),var(--ls-border-color-l),var(--ls-border-alpha,1)) 0);
7458
+ background-size: 100% 2em
7459
+ }
7460
+ .Form .Form-select > option {
7461
+ color: var(--ls-fg-lightest);
7462
+ background: var(--ls-bg-lightest);
7463
+ padding: .5rem;
7464
+ margin: 3px 0;
7465
+ box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06)
7466
+ }
7467
+ .Form .Form-select > option:checked {
7468
+ background: var(--ls-bg-active);
7469
+ color: var(--ls-fg-active)
7470
+ }
7471
+ .Form .Form-select > option:active,
7472
+ .Form .Form-select > option:hover {
7473
+ color: var(--ls-fg-dark);
7474
+ background: var(--ls-bg-dark)
7475
+ }
7476
+ .Form .Form-select:focus:not([readonly]) {
7477
+ box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06);
7478
+ border-color: var(--ls-bg-active);
7479
+ color: var(--ls-fg-lightest);
7480
+ background: var(--ls-bg-lightest)
7481
+ }
7482
+ .Form .Form-select:focus:not([readonly]) + label {
7483
+ color: var(--ls-bg-active)
7484
+ }
7485
+ .Form .Form-select ~ .Form-label {
7486
+ transform: translateY(-80%)
7487
+ }
7488
+ .Form .Form-label {
7489
+ transform: translateY(12px);
7490
+ transform-origin: 0 100%
7491
+ }
7492
+ .Form .Form-input:focus:not([readonly]) ~ .Input-prefix,
7493
+ .Form .Form-input:focus:not([readonly]) ~ .Prefix {
7494
+ color: var(--ls-bg-active)
7495
+ }
7496
+ .Form .Prefix {
7497
+ position: absolute;
7498
+ transition: color .2s;
7499
+ color: var(--ls-bg-active);
7500
+ top: .25rem;
7501
+ font-size: 1.75rem
7502
+ }
7503
+ .Form .Prefix ~ input,
7504
+ .Form .Prefix ~ textarea {
7505
+ width: calc(100% - 2.5rem);
7506
+ margin-left: 2.5rem
7507
+ }
7508
+ .Form .Prefix ~ label {
7509
+ margin-left: 2.5rem
7535
7510
  }
7536
- .Form label.active {
7537
- font-size: .8rem
7511
+ .Form.Input-pre-icon .Form-input {
7512
+ width: calc(100% - 40px);
7513
+ padding-left: 40px
7514
+ }
7515
+ .Form.Input-pre-icon .Input-prefix {
7516
+ left: 16px;
7517
+ right: initial
7518
+ }
7519
+ .Form.Input-pre-icon .Form-label {
7520
+ left: 40px;
7521
+ right: initial
7522
+ }
7523
+ .Form.Input-post-icon .Form-input {
7524
+ width: calc(100% - 40px);
7525
+ padding-right: 40px
7526
+ }
7527
+ .Form.Input-post-icon .Input-prefix {
7528
+ right: 16px;
7529
+ left: initial
7530
+ }
7531
+ .Form .Input-prefix {
7532
+ position: absolute;
7533
+ top: 50%;
7534
+ color: var(--ls-fg-light);
7535
+ pointer-events: none;
7536
+ transform: translateY(-50%);
7537
+ transition: color .2s
7538
+ }
7539
+ .Form.Form-sm label {
7540
+ font-size: .875rem
7538
7541
  }
7539
7542
  .Form.Form-lg label {
7540
7543
  font-size: 1.25rem
7541
7544
  }
7542
- .Form.Form-lg label.active {
7543
- font-size: .95rem
7545
+ .Form .Form-input,
7546
+ .Form .Form-select {
7547
+ padding: 5px 0;
7548
+ font-size: 1rem
7544
7549
  }
7545
- .Form.Form-sm label {
7550
+ .Form .Form-input:not(.Form-select),
7551
+ .Form .Form-select:not(.Form-select) {
7552
+ height: calc(1.5em + 0rem + 2px)
7553
+ }
7554
+ .Form .Form-input-sm,
7555
+ .Form .Form-select-sm {
7556
+ padding: 3px 0;
7546
7557
  font-size: .875rem
7547
7558
  }
7548
- .Form.Form-sm label.active {
7549
- font-size: .75rem
7559
+ .Form .Form-input-sm:not(.Form-select),
7560
+ .Form .Form-select-sm:not(.Form-select) {
7561
+ height: calc(1.5em - .25rem + 2px)
7562
+ }
7563
+ .Form .Form-input-lg,
7564
+ .Form .Form-select-lg {
7565
+ padding: 7px 0;
7566
+ font-size: 1.25rem
7550
7567
  }
7551
- .Form input:focus ~ label,
7552
- .Form input:valid ~ label {
7553
- transform: translateY(-140%)
7568
+ .Form .Form-input-lg:not(.Form-select),
7569
+ .Form .Form-select-lg:not(.Form-select) {
7570
+ height: calc(1.5em + .5rem + 2px)
7554
7571
  }
7555
7572
  .Form-check [type=radio] {
7556
7573
  position: absolute;
@@ -7649,6 +7666,79 @@
7649
7666
  .Form-check[class*=With-gap] [type=radio]:disabled:checked + span:after {
7650
7667
  background-color: var(--ls-fg-muted)
7651
7668
  }
7669
+ .Form-select-Old {
7670
+ position: relative;
7671
+ width: 100%
7672
+ }
7673
+ .Form-select-Old:after {
7674
+ position: absolute;
7675
+ top: 18px;
7676
+ right: 10px;
7677
+ width: 0;
7678
+ height: 0;
7679
+ padding: 0;
7680
+ content: "";
7681
+ border-left: 6px solid transparent;
7682
+ border-right: 6px solid transparent;
7683
+ border-top: 6px solid rgba(0,0,0,.12);
7684
+ pointer-events: none
7685
+ }
7686
+ .Form-select-Old .Select {
7687
+ position: relative;
7688
+ font-family: inherit;
7689
+ background-color: transparent;
7690
+ width: 100%;
7691
+ padding: 10px 10px 10px 0;
7692
+ border-radius: 0;
7693
+ border: none;
7694
+ border-bottom: 1px solid rgba(0,0,0,.12);
7695
+ -webkit-appearance: none;
7696
+ -moz-appearance: none;
7697
+ appearance: none
7698
+ }
7699
+ .Form-select-Old .Select:focus {
7700
+ outline: 0;
7701
+ border-bottom: 1px solid transparent
7702
+ }
7703
+ .Form-select-Old .Select:focus ~ .Select-label,
7704
+ .Form-select-Old .Select:valid ~ .Select-label {
7705
+ color: #2f80ed;
7706
+ top: -10px;
7707
+ transition: .2s ease all
7708
+ }
7709
+ .Form-select-Old .Select:focus ~ .Select-bar:after,
7710
+ .Form-select-Old .Select:focus ~ .Select-bar:before {
7711
+ width: 50%
7712
+ }
7713
+ .Form-select-Old .Select-label {
7714
+ color: rgba(0,0,0,.26);
7715
+ position: absolute;
7716
+ pointer-events: none;
7717
+ left: 0;
7718
+ top: 10px;
7719
+ transition: .2s ease all
7720
+ }
7721
+ .Form-select-Old .Select-bar {
7722
+ position: relative;
7723
+ display: block;
7724
+ width: 100%
7725
+ }
7726
+ .Form-select-Old .Select-bar:after,
7727
+ .Form-select-Old .Select-bar:before {
7728
+ content: "";
7729
+ height: 2px;
7730
+ width: 0;
7731
+ bottom: 1px;
7732
+ position: absolute;
7733
+ background: #2f80ed;
7734
+ transition: .2s ease all
7735
+ }
7736
+ .Form-select-Old .Select-bar:before {
7737
+ left: 50%
7738
+ }
7739
+ .Form-select-Old .Select-bar:after {
7740
+ right: 50%
7741
+ }
7652
7742
  .Switch {
7653
7743
  cursor: pointer;
7654
7744
  -webkit-user-select: none;
@@ -9370,7 +9460,11 @@
9370
9460
  --ls-fg-active: white;
9371
9461
  --ls-fg-muted: #a7afb9;
9372
9462
  --ls-shadow-color: 0,0,0;
9373
- --ls-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
9463
+ --ls-border-alpha: 1;
9464
+ --ls-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9465
+ --ls-border-color-h: 260deg;
9466
+ --ls-border-color-s: 81%;
9467
+ --ls-border-color-l: 70%
9374
9468
  }
9375
9469
  .Theme-primary:not(.Theme-outline) .Btn-close {
9376
9470
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9389,7 +9483,11 @@
9389
9483
  --ls-alert-fg-active: white;
9390
9484
  --ls-alert-fg-muted: #a7afb9;
9391
9485
  --ls-alert-shadow-color: 0,0,0;
9392
- --ls-alert-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
9486
+ --ls-border-alpha: 1;
9487
+ --ls-alert-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9488
+ --ls-alert-border-color-h: 260deg;
9489
+ --ls-alert-border-color-s: 81%;
9490
+ --ls-alert-border-color-l: 70%
9393
9491
  }
9394
9492
  .Alert-primary:not(.Alert-outline) .Btn-close {
9395
9493
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9408,7 +9506,11 @@
9408
9506
  --ls-calendar-fg-active: white;
9409
9507
  --ls-calendar-fg-muted: #a7afb9;
9410
9508
  --ls-calendar-shadow-color: 0,0,0;
9411
- --ls-calendar-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
9509
+ --ls-border-alpha: 1;
9510
+ --ls-calendar-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9511
+ --ls-calendar-border-color-h: 260deg;
9512
+ --ls-calendar-border-color-s: 81%;
9513
+ --ls-calendar-border-color-l: 70%
9412
9514
  }
9413
9515
  .Calendar-primary:not(.Calendar-outline) .Btn-close {
9414
9516
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9427,7 +9529,11 @@
9427
9529
  --ls-card-fg-active: white;
9428
9530
  --ls-card-fg-muted: #a7afb9;
9429
9531
  --ls-card-shadow-color: 0,0,0;
9430
- --ls-card-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
9532
+ --ls-border-alpha: 1;
9533
+ --ls-card-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9534
+ --ls-card-border-color-h: 260deg;
9535
+ --ls-card-border-color-s: 81%;
9536
+ --ls-card-border-color-l: 70%
9431
9537
  }
9432
9538
  .Card-primary:not(.Card-outline) .Btn-close {
9433
9539
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9446,7 +9552,11 @@
9446
9552
  --ls-caret-fg-active: white;
9447
9553
  --ls-caret-fg-muted: #a7afb9;
9448
9554
  --ls-caret-shadow-color: 0,0,0;
9449
- --ls-caret-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
9555
+ --ls-border-alpha: 1;
9556
+ --ls-caret-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9557
+ --ls-caret-border-color-h: 260deg;
9558
+ --ls-caret-border-color-s: 81%;
9559
+ --ls-caret-border-color-l: 70%
9450
9560
  }
9451
9561
  .Caret-primary:not(.Caret-outline) .Btn-close {
9452
9562
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9465,11 +9575,84 @@
9465
9575
  --ls-toast-fg-active: white;
9466
9576
  --ls-toast-fg-muted: #a7afb9;
9467
9577
  --ls-toast-shadow-color: 0,0,0;
9468
- --ls-toast-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
9578
+ --ls-border-alpha: 1;
9579
+ --ls-toast-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9580
+ --ls-toast-border-color-h: 260deg;
9581
+ --ls-toast-border-color-s: 81%;
9582
+ --ls-toast-border-color-l: 70%
9469
9583
  }
9470
9584
  .Toast-primary:not(.Toast-outline) .Btn-close {
9471
9585
  filter: invert(1) grayscale(100%) brightness(200%)
9472
9586
  }
9587
+ .Btn-primary {
9588
+ --ls-btn-bg-body: #f2edfd;
9589
+ --ls-btn-bg-darkest: #4712af;
9590
+ --ls-btn-fg-darkest: white;
9591
+ --ls-btn-bg-dark: #773deb;
9592
+ --ls-btn-fg-dark: white;
9593
+ --ls-btn-bg-light: #dfd1fa;
9594
+ --ls-btn-fg-light: black;
9595
+ --ls-btn-bg-lightest: #efe8fd;
9596
+ --ls-btn-fg-lightest: black;
9597
+ --ls-btn-bg-active: #4712af;
9598
+ --ls-btn-fg-active: white;
9599
+ --ls-btn-fg-muted: #a7afb9;
9600
+ --ls-btn-shadow-color: 0,0,0;
9601
+ --ls-border-alpha: 1;
9602
+ --ls-btn-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9603
+ --ls-btn-border-color-h: 260deg;
9604
+ --ls-btn-border-color-s: 81%;
9605
+ --ls-btn-border-color-l: 70%
9606
+ }
9607
+ .Btn-primary:not(.Btn-outline) .Btn-close {
9608
+ filter: invert(1) grayscale(100%) brightness(200%)
9609
+ }
9610
+ .Btn-outline-primary {
9611
+ --ls-btn-bg-body: #f2edfd;
9612
+ --ls-btn-bg-darkest: #4712af;
9613
+ --ls-btn-fg-darkest: white;
9614
+ --ls-btn-bg-dark: #773deb;
9615
+ --ls-btn-fg-dark: white;
9616
+ --ls-btn-bg-light: #dfd1fa;
9617
+ --ls-btn-fg-light: black;
9618
+ --ls-btn-bg-lightest: #efe8fd;
9619
+ --ls-btn-fg-lightest: black;
9620
+ --ls-btn-bg-active: #4712af;
9621
+ --ls-btn-fg-active: white;
9622
+ --ls-btn-fg-muted: #a7afb9;
9623
+ --ls-btn-shadow-color: 0,0,0;
9624
+ --ls-border-alpha: 1;
9625
+ --ls-btn-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9626
+ --ls-btn-border-color-h: 260deg;
9627
+ --ls-btn-border-color-s: 81%;
9628
+ --ls-btn-border-color-l: 70%
9629
+ }
9630
+ .Btn-outline-primary:not(.Btn-outline-outline) .Btn-close {
9631
+ filter: invert(1) grayscale(100%) brightness(200%)
9632
+ }
9633
+ .List-item-primary {
9634
+ --ls-lst-bg-body: #f2edfd;
9635
+ --ls-lst-bg-darkest: #4712af;
9636
+ --ls-lst-fg-darkest: white;
9637
+ --ls-lst-bg-dark: #773deb;
9638
+ --ls-lst-fg-dark: white;
9639
+ --ls-lst-bg-light: #dfd1fa;
9640
+ --ls-lst-fg-light: black;
9641
+ --ls-lst-bg-lightest: #efe8fd;
9642
+ --ls-lst-fg-lightest: black;
9643
+ --ls-lst-bg-active: #4712af;
9644
+ --ls-lst-fg-active: white;
9645
+ --ls-lst-fg-muted: #a7afb9;
9646
+ --ls-lst-shadow-color: 0,0,0;
9647
+ --ls-border-alpha: 1;
9648
+ --ls-lst-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1));
9649
+ --ls-lst-border-color-h: 260deg;
9650
+ --ls-lst-border-color-s: 81%;
9651
+ --ls-lst-border-color-l: 70%
9652
+ }
9653
+ .List-item-primary:not(.List-item-outline) .Btn-close {
9654
+ filter: invert(1) grayscale(100%) brightness(200%)
9655
+ }
9473
9656
  .Theme-secondary {
9474
9657
  --ls-bg-body: #f4f5f6;
9475
9658
  --ls-bg-darkest: #6d767e;
@@ -9484,7 +9667,11 @@
9484
9667
  --ls-fg-active: white;
9485
9668
  --ls-fg-muted: #a7afb9;
9486
9669
  --ls-shadow-color: 0,0,0;
9487
- --ls-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
9670
+ --ls-border-alpha: 1;
9671
+ --ls-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9672
+ --ls-border-color-h: 208deg;
9673
+ --ls-border-color-s: 7%;
9674
+ --ls-border-color-l: 70%
9488
9675
  }
9489
9676
  .Theme-secondary:not(.Theme-outline) .Btn-close {
9490
9677
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9503,7 +9690,11 @@
9503
9690
  --ls-alert-fg-active: white;
9504
9691
  --ls-alert-fg-muted: #a7afb9;
9505
9692
  --ls-alert-shadow-color: 0,0,0;
9506
- --ls-alert-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
9693
+ --ls-border-alpha: 1;
9694
+ --ls-alert-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9695
+ --ls-alert-border-color-h: 208deg;
9696
+ --ls-alert-border-color-s: 7%;
9697
+ --ls-alert-border-color-l: 70%
9507
9698
  }
9508
9699
  .Alert-secondary:not(.Alert-outline) .Btn-close {
9509
9700
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9522,7 +9713,11 @@
9522
9713
  --ls-calendar-fg-active: white;
9523
9714
  --ls-calendar-fg-muted: #a7afb9;
9524
9715
  --ls-calendar-shadow-color: 0,0,0;
9525
- --ls-calendar-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
9716
+ --ls-border-alpha: 1;
9717
+ --ls-calendar-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9718
+ --ls-calendar-border-color-h: 208deg;
9719
+ --ls-calendar-border-color-s: 7%;
9720
+ --ls-calendar-border-color-l: 70%
9526
9721
  }
9527
9722
  .Calendar-secondary:not(.Calendar-outline) .Btn-close {
9528
9723
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9541,7 +9736,11 @@
9541
9736
  --ls-card-fg-active: white;
9542
9737
  --ls-card-fg-muted: #a7afb9;
9543
9738
  --ls-card-shadow-color: 0,0,0;
9544
- --ls-card-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
9739
+ --ls-border-alpha: 1;
9740
+ --ls-card-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9741
+ --ls-card-border-color-h: 208deg;
9742
+ --ls-card-border-color-s: 7%;
9743
+ --ls-card-border-color-l: 70%
9545
9744
  }
9546
9745
  .Card-secondary:not(.Card-outline) .Btn-close {
9547
9746
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9560,7 +9759,11 @@
9560
9759
  --ls-caret-fg-active: white;
9561
9760
  --ls-caret-fg-muted: #a7afb9;
9562
9761
  --ls-caret-shadow-color: 0,0,0;
9563
- --ls-caret-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
9762
+ --ls-border-alpha: 1;
9763
+ --ls-caret-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9764
+ --ls-caret-border-color-h: 208deg;
9765
+ --ls-caret-border-color-s: 7%;
9766
+ --ls-caret-border-color-l: 70%
9564
9767
  }
9565
9768
  .Caret-secondary:not(.Caret-outline) .Btn-close {
9566
9769
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9579,11 +9782,84 @@
9579
9782
  --ls-toast-fg-active: white;
9580
9783
  --ls-toast-fg-muted: #a7afb9;
9581
9784
  --ls-toast-shadow-color: 0,0,0;
9582
- --ls-toast-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
9785
+ --ls-border-alpha: 1;
9786
+ --ls-toast-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9787
+ --ls-toast-border-color-h: 208deg;
9788
+ --ls-toast-border-color-s: 7%;
9789
+ --ls-toast-border-color-l: 70%
9583
9790
  }
9584
9791
  .Toast-secondary:not(.Toast-outline) .Btn-close {
9585
9792
  filter: invert(1) grayscale(100%) brightness(200%)
9586
9793
  }
9794
+ .Btn-secondary {
9795
+ --ls-btn-bg-body: #f4f5f6;
9796
+ --ls-btn-bg-darkest: #6d767e;
9797
+ --ls-btn-fg-darkest: white;
9798
+ --ls-btn-bg-dark: #a2a9ae;
9799
+ --ls-btn-fg-dark: white;
9800
+ --ls-btn-bg-light: #e4e6e7;
9801
+ --ls-btn-fg-light: black;
9802
+ --ls-btn-bg-lightest: #f1f2f3;
9803
+ --ls-btn-fg-lightest: black;
9804
+ --ls-btn-bg-active: #6d767e;
9805
+ --ls-btn-fg-active: white;
9806
+ --ls-btn-fg-muted: #a7afb9;
9807
+ --ls-btn-shadow-color: 0,0,0;
9808
+ --ls-border-alpha: 1;
9809
+ --ls-btn-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9810
+ --ls-btn-border-color-h: 208deg;
9811
+ --ls-btn-border-color-s: 7%;
9812
+ --ls-btn-border-color-l: 70%
9813
+ }
9814
+ .Btn-secondary:not(.Btn-outline) .Btn-close {
9815
+ filter: invert(1) grayscale(100%) brightness(200%)
9816
+ }
9817
+ .Btn-outline-secondary {
9818
+ --ls-btn-bg-body: #f4f5f6;
9819
+ --ls-btn-bg-darkest: #6d767e;
9820
+ --ls-btn-fg-darkest: white;
9821
+ --ls-btn-bg-dark: #a2a9ae;
9822
+ --ls-btn-fg-dark: white;
9823
+ --ls-btn-bg-light: #e4e6e7;
9824
+ --ls-btn-fg-light: black;
9825
+ --ls-btn-bg-lightest: #f1f2f3;
9826
+ --ls-btn-fg-lightest: black;
9827
+ --ls-btn-bg-active: #6d767e;
9828
+ --ls-btn-fg-active: white;
9829
+ --ls-btn-fg-muted: #a7afb9;
9830
+ --ls-btn-shadow-color: 0,0,0;
9831
+ --ls-border-alpha: 1;
9832
+ --ls-btn-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9833
+ --ls-btn-border-color-h: 208deg;
9834
+ --ls-btn-border-color-s: 7%;
9835
+ --ls-btn-border-color-l: 70%
9836
+ }
9837
+ .Btn-outline-secondary:not(.Btn-outline-outline) .Btn-close {
9838
+ filter: invert(1) grayscale(100%) brightness(200%)
9839
+ }
9840
+ .List-item-secondary {
9841
+ --ls-lst-bg-body: #f4f5f6;
9842
+ --ls-lst-bg-darkest: #6d767e;
9843
+ --ls-lst-fg-darkest: white;
9844
+ --ls-lst-bg-dark: #a2a9ae;
9845
+ --ls-lst-fg-dark: white;
9846
+ --ls-lst-bg-light: #e4e6e7;
9847
+ --ls-lst-fg-light: black;
9848
+ --ls-lst-bg-lightest: #f1f2f3;
9849
+ --ls-lst-fg-lightest: black;
9850
+ --ls-lst-bg-active: #6d767e;
9851
+ --ls-lst-fg-active: white;
9852
+ --ls-lst-fg-muted: #a7afb9;
9853
+ --ls-lst-shadow-color: 0,0,0;
9854
+ --ls-border-alpha: 1;
9855
+ --ls-lst-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1));
9856
+ --ls-lst-border-color-h: 208deg;
9857
+ --ls-lst-border-color-s: 7%;
9858
+ --ls-lst-border-color-l: 70%
9859
+ }
9860
+ .List-item-secondary:not(.List-item-outline) .Btn-close {
9861
+ filter: invert(1) grayscale(100%) brightness(200%)
9862
+ }
9587
9863
  .Theme-success {
9588
9864
  --ls-bg-body: #effbf1;
9589
9865
  --ls-bg-darkest: #29a847;
@@ -9598,7 +9874,11 @@
9598
9874
  --ls-fg-active: white;
9599
9875
  --ls-fg-muted: #a7afb9;
9600
9876
  --ls-shadow-color: 0,0,0;
9601
- --ls-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
9877
+ --ls-border-alpha: 1;
9878
+ --ls-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
9879
+ --ls-border-color-h: 134deg;
9880
+ --ls-border-color-s: 61%;
9881
+ --ls-border-color-l: 70%
9602
9882
  }
9603
9883
  .Theme-success:not(.Theme-outline) .Btn-close {
9604
9884
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9617,7 +9897,11 @@
9617
9897
  --ls-alert-fg-active: white;
9618
9898
  --ls-alert-fg-muted: #a7afb9;
9619
9899
  --ls-alert-shadow-color: 0,0,0;
9620
- --ls-alert-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
9900
+ --ls-border-alpha: 1;
9901
+ --ls-alert-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
9902
+ --ls-alert-border-color-h: 134deg;
9903
+ --ls-alert-border-color-s: 61%;
9904
+ --ls-alert-border-color-l: 70%
9621
9905
  }
9622
9906
  .Alert-success:not(.Alert-outline) .Btn-close {
9623
9907
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9636,7 +9920,11 @@
9636
9920
  --ls-calendar-fg-active: white;
9637
9921
  --ls-calendar-fg-muted: #a7afb9;
9638
9922
  --ls-calendar-shadow-color: 0,0,0;
9639
- --ls-calendar-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
9923
+ --ls-border-alpha: 1;
9924
+ --ls-calendar-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
9925
+ --ls-calendar-border-color-h: 134deg;
9926
+ --ls-calendar-border-color-s: 61%;
9927
+ --ls-calendar-border-color-l: 70%
9640
9928
  }
9641
9929
  .Calendar-success:not(.Calendar-outline) .Btn-close {
9642
9930
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9655,7 +9943,11 @@
9655
9943
  --ls-card-fg-active: white;
9656
9944
  --ls-card-fg-muted: #a7afb9;
9657
9945
  --ls-card-shadow-color: 0,0,0;
9658
- --ls-card-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
9946
+ --ls-border-alpha: 1;
9947
+ --ls-card-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
9948
+ --ls-card-border-color-h: 134deg;
9949
+ --ls-card-border-color-s: 61%;
9950
+ --ls-card-border-color-l: 70%
9659
9951
  }
9660
9952
  .Card-success:not(.Card-outline) .Btn-close {
9661
9953
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9674,7 +9966,11 @@
9674
9966
  --ls-caret-fg-active: white;
9675
9967
  --ls-caret-fg-muted: #a7afb9;
9676
9968
  --ls-caret-shadow-color: 0,0,0;
9677
- --ls-caret-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
9969
+ --ls-border-alpha: 1;
9970
+ --ls-caret-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
9971
+ --ls-caret-border-color-h: 134deg;
9972
+ --ls-caret-border-color-s: 61%;
9973
+ --ls-caret-border-color-l: 70%
9678
9974
  }
9679
9975
  .Caret-success:not(.Caret-outline) .Btn-close {
9680
9976
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9693,11 +9989,84 @@
9693
9989
  --ls-toast-fg-active: white;
9694
9990
  --ls-toast-fg-muted: #a7afb9;
9695
9991
  --ls-toast-shadow-color: 0,0,0;
9696
- --ls-toast-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
9992
+ --ls-border-alpha: 1;
9993
+ --ls-toast-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
9994
+ --ls-toast-border-color-h: 134deg;
9995
+ --ls-toast-border-color-s: 61%;
9996
+ --ls-toast-border-color-l: 70%
9697
9997
  }
9698
9998
  .Toast-success:not(.Toast-outline) .Btn-close {
9699
9999
  filter: invert(1) grayscale(100%) brightness(200%)
9700
10000
  }
10001
+ .Btn-success {
10002
+ --ls-btn-bg-body: #effbf1;
10003
+ --ls-btn-bg-darkest: #29a847;
10004
+ --ls-btn-fg-darkest: white;
10005
+ --ls-btn-bg-dark: #5fd87b;
10006
+ --ls-btn-fg-dark: white;
10007
+ --ls-btn-bg-light: #d6f5dd;
10008
+ --ls-btn-fg-light: black;
10009
+ --ls-btn-bg-lightest: #eafaee;
10010
+ --ls-btn-fg-lightest: black;
10011
+ --ls-btn-bg-active: #29a847;
10012
+ --ls-btn-fg-active: white;
10013
+ --ls-btn-fg-muted: #a7afb9;
10014
+ --ls-btn-shadow-color: 0,0,0;
10015
+ --ls-border-alpha: 1;
10016
+ --ls-btn-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
10017
+ --ls-btn-border-color-h: 134deg;
10018
+ --ls-btn-border-color-s: 61%;
10019
+ --ls-btn-border-color-l: 70%
10020
+ }
10021
+ .Btn-success:not(.Btn-outline) .Btn-close {
10022
+ filter: invert(1) grayscale(100%) brightness(200%)
10023
+ }
10024
+ .Btn-outline-success {
10025
+ --ls-btn-bg-body: #effbf1;
10026
+ --ls-btn-bg-darkest: #29a847;
10027
+ --ls-btn-fg-darkest: white;
10028
+ --ls-btn-bg-dark: #5fd87b;
10029
+ --ls-btn-fg-dark: white;
10030
+ --ls-btn-bg-light: #d6f5dd;
10031
+ --ls-btn-fg-light: black;
10032
+ --ls-btn-bg-lightest: #eafaee;
10033
+ --ls-btn-fg-lightest: black;
10034
+ --ls-btn-bg-active: #29a847;
10035
+ --ls-btn-fg-active: white;
10036
+ --ls-btn-fg-muted: #a7afb9;
10037
+ --ls-btn-shadow-color: 0,0,0;
10038
+ --ls-border-alpha: 1;
10039
+ --ls-btn-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
10040
+ --ls-btn-border-color-h: 134deg;
10041
+ --ls-btn-border-color-s: 61%;
10042
+ --ls-btn-border-color-l: 70%
10043
+ }
10044
+ .Btn-outline-success:not(.Btn-outline-outline) .Btn-close {
10045
+ filter: invert(1) grayscale(100%) brightness(200%)
10046
+ }
10047
+ .List-item-success {
10048
+ --ls-lst-bg-body: #effbf1;
10049
+ --ls-lst-bg-darkest: #29a847;
10050
+ --ls-lst-fg-darkest: white;
10051
+ --ls-lst-bg-dark: #5fd87b;
10052
+ --ls-lst-fg-dark: white;
10053
+ --ls-lst-bg-light: #d6f5dd;
10054
+ --ls-lst-fg-light: black;
10055
+ --ls-lst-bg-lightest: #eafaee;
10056
+ --ls-lst-fg-lightest: black;
10057
+ --ls-lst-bg-active: #29a847;
10058
+ --ls-lst-fg-active: white;
10059
+ --ls-lst-fg-muted: #a7afb9;
10060
+ --ls-lst-shadow-color: 0,0,0;
10061
+ --ls-border-alpha: 1;
10062
+ --ls-lst-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1));
10063
+ --ls-lst-border-color-h: 134deg;
10064
+ --ls-lst-border-color-s: 61%;
10065
+ --ls-lst-border-color-l: 70%
10066
+ }
10067
+ .List-item-success:not(.List-item-outline) .Btn-close {
10068
+ filter: invert(1) grayscale(100%) brightness(200%)
10069
+ }
9701
10070
  .Theme-info {
9702
10071
  --ls-bg-body: #ebf4ff;
9703
10072
  --ls-bg-darkest: #0367d8;
@@ -9712,7 +10081,11 @@
9712
10081
  --ls-fg-active: white;
9713
10082
  --ls-fg-muted: #a7afb9;
9714
10083
  --ls-shadow-color: 0,0,0;
9715
- --ls-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
10084
+ --ls-border-alpha: 1;
10085
+ --ls-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10086
+ --ls-border-color-h: 212deg;
10087
+ --ls-border-color-s: 97%;
10088
+ --ls-border-color-l: 70%
9716
10089
  }
9717
10090
  .Theme-info:not(.Theme-outline) .Btn-close {
9718
10091
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9731,7 +10104,11 @@
9731
10104
  --ls-alert-fg-active: white;
9732
10105
  --ls-alert-fg-muted: #a7afb9;
9733
10106
  --ls-alert-shadow-color: 0,0,0;
9734
- --ls-alert-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
10107
+ --ls-border-alpha: 1;
10108
+ --ls-alert-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10109
+ --ls-alert-border-color-h: 212deg;
10110
+ --ls-alert-border-color-s: 97%;
10111
+ --ls-alert-border-color-l: 70%
9735
10112
  }
9736
10113
  .Alert-info:not(.Alert-outline) .Btn-close {
9737
10114
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9750,7 +10127,11 @@
9750
10127
  --ls-calendar-fg-active: white;
9751
10128
  --ls-calendar-fg-muted: #a7afb9;
9752
10129
  --ls-calendar-shadow-color: 0,0,0;
9753
- --ls-calendar-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
10130
+ --ls-border-alpha: 1;
10131
+ --ls-calendar-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10132
+ --ls-calendar-border-color-h: 212deg;
10133
+ --ls-calendar-border-color-s: 97%;
10134
+ --ls-calendar-border-color-l: 70%
9754
10135
  }
9755
10136
  .Calendar-info:not(.Calendar-outline) .Btn-close {
9756
10137
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9769,7 +10150,11 @@
9769
10150
  --ls-card-fg-active: white;
9770
10151
  --ls-card-fg-muted: #a7afb9;
9771
10152
  --ls-card-shadow-color: 0,0,0;
9772
- --ls-card-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
10153
+ --ls-border-alpha: 1;
10154
+ --ls-card-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10155
+ --ls-card-border-color-h: 212deg;
10156
+ --ls-card-border-color-s: 97%;
10157
+ --ls-card-border-color-l: 70%
9773
10158
  }
9774
10159
  .Card-info:not(.Card-outline) .Btn-close {
9775
10160
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9788,7 +10173,11 @@
9788
10173
  --ls-caret-fg-active: white;
9789
10174
  --ls-caret-fg-muted: #a7afb9;
9790
10175
  --ls-caret-shadow-color: 0,0,0;
9791
- --ls-caret-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
10176
+ --ls-border-alpha: 1;
10177
+ --ls-caret-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10178
+ --ls-caret-border-color-h: 212deg;
10179
+ --ls-caret-border-color-s: 97%;
10180
+ --ls-caret-border-color-l: 70%
9792
10181
  }
9793
10182
  .Caret-info:not(.Caret-outline) .Btn-close {
9794
10183
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9807,11 +10196,84 @@
9807
10196
  --ls-toast-fg-active: white;
9808
10197
  --ls-toast-fg-muted: #a7afb9;
9809
10198
  --ls-toast-shadow-color: 0,0,0;
9810
- --ls-toast-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
10199
+ --ls-border-alpha: 1;
10200
+ --ls-toast-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10201
+ --ls-toast-border-color-h: 212deg;
10202
+ --ls-toast-border-color-s: 97%;
10203
+ --ls-toast-border-color-l: 70%
9811
10204
  }
9812
10205
  .Toast-info:not(.Toast-outline) .Btn-close {
9813
10206
  filter: invert(1) grayscale(100%) brightness(200%)
9814
10207
  }
10208
+ .Btn-info {
10209
+ --ls-btn-bg-body: #ebf4ff;
10210
+ --ls-btn-bg-darkest: #0367d8;
10211
+ --ls-btn-fg-darkest: white;
10212
+ --ls-btn-bg-dark: #459bfc;
10213
+ --ls-btn-fg-dark: white;
10214
+ --ls-btn-bg-light: #cde4fe;
10215
+ --ls-btn-fg-light: black;
10216
+ --ls-btn-bg-lightest: #e6f1ff;
10217
+ --ls-btn-fg-lightest: black;
10218
+ --ls-btn-bg-active: #0367d8;
10219
+ --ls-btn-fg-active: white;
10220
+ --ls-btn-fg-muted: #a7afb9;
10221
+ --ls-btn-shadow-color: 0,0,0;
10222
+ --ls-border-alpha: 1;
10223
+ --ls-btn-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10224
+ --ls-btn-border-color-h: 212deg;
10225
+ --ls-btn-border-color-s: 97%;
10226
+ --ls-btn-border-color-l: 70%
10227
+ }
10228
+ .Btn-info:not(.Btn-outline) .Btn-close {
10229
+ filter: invert(1) grayscale(100%) brightness(200%)
10230
+ }
10231
+ .Btn-outline-info {
10232
+ --ls-btn-bg-body: #ebf4ff;
10233
+ --ls-btn-bg-darkest: #0367d8;
10234
+ --ls-btn-fg-darkest: white;
10235
+ --ls-btn-bg-dark: #459bfc;
10236
+ --ls-btn-fg-dark: white;
10237
+ --ls-btn-bg-light: #cde4fe;
10238
+ --ls-btn-fg-light: black;
10239
+ --ls-btn-bg-lightest: #e6f1ff;
10240
+ --ls-btn-fg-lightest: black;
10241
+ --ls-btn-bg-active: #0367d8;
10242
+ --ls-btn-fg-active: white;
10243
+ --ls-btn-fg-muted: #a7afb9;
10244
+ --ls-btn-shadow-color: 0,0,0;
10245
+ --ls-border-alpha: 1;
10246
+ --ls-btn-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10247
+ --ls-btn-border-color-h: 212deg;
10248
+ --ls-btn-border-color-s: 97%;
10249
+ --ls-btn-border-color-l: 70%
10250
+ }
10251
+ .Btn-outline-info:not(.Btn-outline-outline) .Btn-close {
10252
+ filter: invert(1) grayscale(100%) brightness(200%)
10253
+ }
10254
+ .List-item-info {
10255
+ --ls-lst-bg-body: #ebf4ff;
10256
+ --ls-lst-bg-darkest: #0367d8;
10257
+ --ls-lst-fg-darkest: white;
10258
+ --ls-lst-bg-dark: #459bfc;
10259
+ --ls-lst-fg-dark: white;
10260
+ --ls-lst-bg-light: #cde4fe;
10261
+ --ls-lst-fg-light: black;
10262
+ --ls-lst-bg-lightest: #e6f1ff;
10263
+ --ls-lst-fg-lightest: black;
10264
+ --ls-lst-bg-active: #0367d8;
10265
+ --ls-lst-fg-active: white;
10266
+ --ls-lst-fg-muted: #a7afb9;
10267
+ --ls-lst-shadow-color: 0,0,0;
10268
+ --ls-border-alpha: 1;
10269
+ --ls-lst-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1));
10270
+ --ls-lst-border-color-h: 212deg;
10271
+ --ls-lst-border-color-s: 97%;
10272
+ --ls-lst-border-color-l: 70%
10273
+ }
10274
+ .List-item-info:not(.List-item-outline) .Btn-close {
10275
+ filter: invert(1) grayscale(100%) brightness(200%)
10276
+ }
9815
10277
  .Theme-warning {
9816
10278
  --ls-bg-body: #fffaeb;
9817
10279
  --ls-bg-darkest: #ffc105;
@@ -9826,7 +10288,11 @@
9826
10288
  --ls-fg-active: white;
9827
10289
  --ls-fg-muted: #a7afb9;
9828
10290
  --ls-shadow-color: 0,0,0;
9829
- --ls-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
10291
+ --ls-border-alpha: 1;
10292
+ --ls-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10293
+ --ls-border-color-h: 45deg;
10294
+ --ls-border-color-s: 100%;
10295
+ --ls-border-color-l: 70%
9830
10296
  }
9831
10297
  .Theme-warning:not(.Theme-outline) .Btn-close {
9832
10298
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9845,7 +10311,11 @@
9845
10311
  --ls-alert-fg-active: white;
9846
10312
  --ls-alert-fg-muted: #a7afb9;
9847
10313
  --ls-alert-shadow-color: 0,0,0;
9848
- --ls-alert-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
10314
+ --ls-border-alpha: 1;
10315
+ --ls-alert-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10316
+ --ls-alert-border-color-h: 45deg;
10317
+ --ls-alert-border-color-s: 100%;
10318
+ --ls-alert-border-color-l: 70%
9849
10319
  }
9850
10320
  .Alert-warning:not(.Alert-outline) .Btn-close {
9851
10321
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9864,7 +10334,11 @@
9864
10334
  --ls-calendar-fg-active: white;
9865
10335
  --ls-calendar-fg-muted: #a7afb9;
9866
10336
  --ls-calendar-shadow-color: 0,0,0;
9867
- --ls-calendar-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
10337
+ --ls-border-alpha: 1;
10338
+ --ls-calendar-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10339
+ --ls-calendar-border-color-h: 45deg;
10340
+ --ls-calendar-border-color-s: 100%;
10341
+ --ls-calendar-border-color-l: 70%
9868
10342
  }
9869
10343
  .Calendar-warning:not(.Calendar-outline) .Btn-close {
9870
10344
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9883,7 +10357,11 @@
9883
10357
  --ls-card-fg-active: white;
9884
10358
  --ls-card-fg-muted: #a7afb9;
9885
10359
  --ls-card-shadow-color: 0,0,0;
9886
- --ls-card-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
10360
+ --ls-border-alpha: 1;
10361
+ --ls-card-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10362
+ --ls-card-border-color-h: 45deg;
10363
+ --ls-card-border-color-s: 100%;
10364
+ --ls-card-border-color-l: 70%
9887
10365
  }
9888
10366
  .Card-warning:not(.Card-outline) .Btn-close {
9889
10367
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9902,7 +10380,11 @@
9902
10380
  --ls-caret-fg-active: white;
9903
10381
  --ls-caret-fg-muted: #a7afb9;
9904
10382
  --ls-caret-shadow-color: 0,0,0;
9905
- --ls-caret-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
10383
+ --ls-border-alpha: 1;
10384
+ --ls-caret-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10385
+ --ls-caret-border-color-h: 45deg;
10386
+ --ls-caret-border-color-s: 100%;
10387
+ --ls-caret-border-color-l: 70%
9906
10388
  }
9907
10389
  .Caret-warning:not(.Caret-outline) .Btn-close {
9908
10390
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9921,11 +10403,84 @@
9921
10403
  --ls-toast-fg-active: white;
9922
10404
  --ls-toast-fg-muted: #a7afb9;
9923
10405
  --ls-toast-shadow-color: 0,0,0;
9924
- --ls-toast-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
10406
+ --ls-border-alpha: 1;
10407
+ --ls-toast-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10408
+ --ls-toast-border-color-h: 45deg;
10409
+ --ls-toast-border-color-s: 100%;
10410
+ --ls-toast-border-color-l: 70%
9925
10411
  }
9926
10412
  .Toast-warning:not(.Toast-outline) .Btn-close {
9927
10413
  filter: invert(1) grayscale(100%) brightness(200%)
9928
10414
  }
10415
+ .Btn-warning {
10416
+ --ls-btn-bg-body: #fffaeb;
10417
+ --ls-btn-bg-darkest: #ffc105;
10418
+ --ls-btn-fg-darkest: white;
10419
+ --ls-btn-bg-dark: #ffda6b;
10420
+ --ls-btn-fg-dark: white;
10421
+ --ls-btn-bg-light: #fff2cc;
10422
+ --ls-btn-fg-light: black;
10423
+ --ls-btn-bg-lightest: #fff9e6;
10424
+ --ls-btn-fg-lightest: black;
10425
+ --ls-btn-bg-active: #ffc105;
10426
+ --ls-btn-fg-active: white;
10427
+ --ls-btn-fg-muted: #a7afb9;
10428
+ --ls-btn-shadow-color: 0,0,0;
10429
+ --ls-border-alpha: 1;
10430
+ --ls-btn-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10431
+ --ls-btn-border-color-h: 45deg;
10432
+ --ls-btn-border-color-s: 100%;
10433
+ --ls-btn-border-color-l: 70%
10434
+ }
10435
+ .Btn-warning:not(.Btn-outline) .Btn-close {
10436
+ filter: invert(1) grayscale(100%) brightness(200%)
10437
+ }
10438
+ .Btn-outline-warning {
10439
+ --ls-btn-bg-body: #fffaeb;
10440
+ --ls-btn-bg-darkest: #ffc105;
10441
+ --ls-btn-fg-darkest: white;
10442
+ --ls-btn-bg-dark: #ffda6b;
10443
+ --ls-btn-fg-dark: white;
10444
+ --ls-btn-bg-light: #fff2cc;
10445
+ --ls-btn-fg-light: black;
10446
+ --ls-btn-bg-lightest: #fff9e6;
10447
+ --ls-btn-fg-lightest: black;
10448
+ --ls-btn-bg-active: #ffc105;
10449
+ --ls-btn-fg-active: white;
10450
+ --ls-btn-fg-muted: #a7afb9;
10451
+ --ls-btn-shadow-color: 0,0,0;
10452
+ --ls-border-alpha: 1;
10453
+ --ls-btn-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10454
+ --ls-btn-border-color-h: 45deg;
10455
+ --ls-btn-border-color-s: 100%;
10456
+ --ls-btn-border-color-l: 70%
10457
+ }
10458
+ .Btn-outline-warning:not(.Btn-outline-outline) .Btn-close {
10459
+ filter: invert(1) grayscale(100%) brightness(200%)
10460
+ }
10461
+ .List-item-warning {
10462
+ --ls-lst-bg-body: #fffaeb;
10463
+ --ls-lst-bg-darkest: #ffc105;
10464
+ --ls-lst-fg-darkest: white;
10465
+ --ls-lst-bg-dark: #ffda6b;
10466
+ --ls-lst-fg-dark: white;
10467
+ --ls-lst-bg-light: #fff2cc;
10468
+ --ls-lst-fg-light: black;
10469
+ --ls-lst-bg-lightest: #fff9e6;
10470
+ --ls-lst-fg-lightest: black;
10471
+ --ls-lst-bg-active: #ffc105;
10472
+ --ls-lst-fg-active: white;
10473
+ --ls-lst-fg-muted: #a7afb9;
10474
+ --ls-lst-shadow-color: 0,0,0;
10475
+ --ls-border-alpha: 1;
10476
+ --ls-lst-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1));
10477
+ --ls-lst-border-color-h: 45deg;
10478
+ --ls-lst-border-color-s: 100%;
10479
+ --ls-lst-border-color-l: 70%
10480
+ }
10481
+ .List-item-warning:not(.List-item-outline) .Btn-close {
10482
+ filter: invert(1) grayscale(100%) brightness(200%)
10483
+ }
9929
10484
  .Theme-danger {
9930
10485
  --ls-bg-body: #fceeef;
9931
10486
  --ls-bg-darkest: #d73c4c;
@@ -9940,7 +10495,11 @@
9940
10495
  --ls-fg-active: white;
9941
10496
  --ls-fg-muted: #a7afb9;
9942
10497
  --ls-shadow-color: 0,0,0;
9943
- --ls-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
10498
+ --ls-border-alpha: 1;
10499
+ --ls-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10500
+ --ls-border-color-h: 354deg;
10501
+ --ls-border-color-s: 66%;
10502
+ --ls-border-color-l: 70%
9944
10503
  }
9945
10504
  .Theme-danger:not(.Theme-outline) .Btn-close {
9946
10505
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9959,7 +10518,11 @@
9959
10518
  --ls-alert-fg-active: white;
9960
10519
  --ls-alert-fg-muted: #a7afb9;
9961
10520
  --ls-alert-shadow-color: 0,0,0;
9962
- --ls-alert-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
10521
+ --ls-border-alpha: 1;
10522
+ --ls-alert-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10523
+ --ls-alert-border-color-h: 354deg;
10524
+ --ls-alert-border-color-s: 66%;
10525
+ --ls-alert-border-color-l: 70%
9963
10526
  }
9964
10527
  .Alert-danger:not(.Alert-outline) .Btn-close {
9965
10528
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9978,7 +10541,11 @@
9978
10541
  --ls-calendar-fg-active: white;
9979
10542
  --ls-calendar-fg-muted: #a7afb9;
9980
10543
  --ls-calendar-shadow-color: 0,0,0;
9981
- --ls-calendar-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
10544
+ --ls-border-alpha: 1;
10545
+ --ls-calendar-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10546
+ --ls-calendar-border-color-h: 354deg;
10547
+ --ls-calendar-border-color-s: 66%;
10548
+ --ls-calendar-border-color-l: 70%
9982
10549
  }
9983
10550
  .Calendar-danger:not(.Calendar-outline) .Btn-close {
9984
10551
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -9997,7 +10564,11 @@
9997
10564
  --ls-card-fg-active: white;
9998
10565
  --ls-card-fg-muted: #a7afb9;
9999
10566
  --ls-card-shadow-color: 0,0,0;
10000
- --ls-card-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
10567
+ --ls-border-alpha: 1;
10568
+ --ls-card-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10569
+ --ls-card-border-color-h: 354deg;
10570
+ --ls-card-border-color-s: 66%;
10571
+ --ls-card-border-color-l: 70%
10001
10572
  }
10002
10573
  .Card-danger:not(.Card-outline) .Btn-close {
10003
10574
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10016,7 +10587,11 @@
10016
10587
  --ls-caret-fg-active: white;
10017
10588
  --ls-caret-fg-muted: #a7afb9;
10018
10589
  --ls-caret-shadow-color: 0,0,0;
10019
- --ls-caret-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
10590
+ --ls-border-alpha: 1;
10591
+ --ls-caret-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10592
+ --ls-caret-border-color-h: 354deg;
10593
+ --ls-caret-border-color-s: 66%;
10594
+ --ls-caret-border-color-l: 70%
10020
10595
  }
10021
10596
  .Caret-danger:not(.Caret-outline) .Btn-close {
10022
10597
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10035,26 +10610,103 @@
10035
10610
  --ls-toast-fg-active: white;
10036
10611
  --ls-toast-fg-muted: #a7afb9;
10037
10612
  --ls-toast-shadow-color: 0,0,0;
10038
- --ls-toast-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
10613
+ --ls-border-alpha: 1;
10614
+ --ls-toast-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10615
+ --ls-toast-border-color-h: 354deg;
10616
+ --ls-toast-border-color-s: 66%;
10617
+ --ls-toast-border-color-l: 70%
10039
10618
  }
10040
10619
  .Toast-danger:not(.Toast-outline) .Btn-close {
10041
10620
  filter: invert(1) grayscale(100%) brightness(200%)
10042
10621
  }
10622
+ .Btn-danger {
10623
+ --ls-btn-bg-body: #fceeef;
10624
+ --ls-btn-bg-darkest: #d73c4c;
10625
+ --ls-btn-fg-darkest: white;
10626
+ --ls-btn-bg-dark: #e8919a;
10627
+ --ls-btn-fg-dark: white;
10628
+ --ls-btn-bg-light: #f6d5d8;
10629
+ --ls-btn-fg-light: black;
10630
+ --ls-btn-bg-lightest: #fbeaec;
10631
+ --ls-btn-fg-lightest: black;
10632
+ --ls-btn-bg-active: #d73c4c;
10633
+ --ls-btn-fg-active: white;
10634
+ --ls-btn-fg-muted: #a7afb9;
10635
+ --ls-btn-shadow-color: 0,0,0;
10636
+ --ls-border-alpha: 1;
10637
+ --ls-btn-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10638
+ --ls-btn-border-color-h: 354deg;
10639
+ --ls-btn-border-color-s: 66%;
10640
+ --ls-btn-border-color-l: 70%
10641
+ }
10642
+ .Btn-danger:not(.Btn-outline) .Btn-close {
10643
+ filter: invert(1) grayscale(100%) brightness(200%)
10644
+ }
10645
+ .Btn-outline-danger {
10646
+ --ls-btn-bg-body: #fceeef;
10647
+ --ls-btn-bg-darkest: #d73c4c;
10648
+ --ls-btn-fg-darkest: white;
10649
+ --ls-btn-bg-dark: #e8919a;
10650
+ --ls-btn-fg-dark: white;
10651
+ --ls-btn-bg-light: #f6d5d8;
10652
+ --ls-btn-fg-light: black;
10653
+ --ls-btn-bg-lightest: #fbeaec;
10654
+ --ls-btn-fg-lightest: black;
10655
+ --ls-btn-bg-active: #d73c4c;
10656
+ --ls-btn-fg-active: white;
10657
+ --ls-btn-fg-muted: #a7afb9;
10658
+ --ls-btn-shadow-color: 0,0,0;
10659
+ --ls-border-alpha: 1;
10660
+ --ls-btn-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10661
+ --ls-btn-border-color-h: 354deg;
10662
+ --ls-btn-border-color-s: 66%;
10663
+ --ls-btn-border-color-l: 70%
10664
+ }
10665
+ .Btn-outline-danger:not(.Btn-outline-outline) .Btn-close {
10666
+ filter: invert(1) grayscale(100%) brightness(200%)
10667
+ }
10668
+ .List-item-danger {
10669
+ --ls-lst-bg-body: #fceeef;
10670
+ --ls-lst-bg-darkest: #d73c4c;
10671
+ --ls-lst-fg-darkest: white;
10672
+ --ls-lst-bg-dark: #e8919a;
10673
+ --ls-lst-fg-dark: white;
10674
+ --ls-lst-bg-light: #f6d5d8;
10675
+ --ls-lst-fg-light: black;
10676
+ --ls-lst-bg-lightest: #fbeaec;
10677
+ --ls-lst-fg-lightest: black;
10678
+ --ls-lst-bg-active: #d73c4c;
10679
+ --ls-lst-fg-active: white;
10680
+ --ls-lst-fg-muted: #a7afb9;
10681
+ --ls-lst-shadow-color: 0,0,0;
10682
+ --ls-border-alpha: 1;
10683
+ --ls-lst-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1));
10684
+ --ls-lst-border-color-h: 354deg;
10685
+ --ls-lst-border-color-s: 66%;
10686
+ --ls-lst-border-color-l: 70%
10687
+ }
10688
+ .List-item-danger:not(.List-item-outline) .Btn-close {
10689
+ filter: invert(1) grayscale(100%) brightness(200%)
10690
+ }
10043
10691
  .Theme-light {
10044
10692
  --ls-bg-body: #d1d9e0;
10045
10693
  --ls-bg-darkest: #e0e6eb;
10046
10694
  --ls-fg-darkest: black;
10047
10695
  --ls-bg-dark: #f0f2f5;
10048
10696
  --ls-fg-dark: black;
10049
- --ls-bg-light: #f9fafb;
10697
+ --ls-bg-light: white;
10050
10698
  --ls-fg-light: black;
10051
- --ls-bg-lightest: white;
10699
+ --ls-bg-lightest: #f9fafb;
10052
10700
  --ls-fg-lightest: black;
10053
10701
  --ls-bg-active: #3692fc;
10054
10702
  --ls-fg-active: white;
10055
10703
  --ls-fg-muted: #a7afb9;
10056
10704
  --ls-shadow-color: 0,0,0;
10057
- --ls-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
10705
+ --ls-border-alpha: 1;
10706
+ --ls-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10707
+ --ls-border-color-h: 210deg;
10708
+ --ls-border-color-s: 20%;
10709
+ --ls-border-color-l: 90%
10058
10710
  }
10059
10711
  .Alert-light {
10060
10712
  --ls-alert-bg-body: #d1d9e0;
@@ -10062,15 +10714,19 @@
10062
10714
  --ls-alert-fg-darkest: black;
10063
10715
  --ls-alert-bg-dark: #f0f2f5;
10064
10716
  --ls-alert-fg-dark: black;
10065
- --ls-alert-bg-light: #f9fafb;
10717
+ --ls-alert-bg-light: white;
10066
10718
  --ls-alert-fg-light: black;
10067
- --ls-alert-bg-lightest: white;
10719
+ --ls-alert-bg-lightest: #f9fafb;
10068
10720
  --ls-alert-fg-lightest: black;
10069
10721
  --ls-alert-bg-active: #3692fc;
10070
10722
  --ls-alert-fg-active: white;
10071
10723
  --ls-alert-fg-muted: #a7afb9;
10072
10724
  --ls-alert-shadow-color: 0,0,0;
10073
- --ls-alert-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
10725
+ --ls-border-alpha: 1;
10726
+ --ls-alert-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10727
+ --ls-alert-border-color-h: 210deg;
10728
+ --ls-alert-border-color-s: 20%;
10729
+ --ls-alert-border-color-l: 90%
10074
10730
  }
10075
10731
  .Calendar-light {
10076
10732
  --ls-calendar-bg-body: #d1d9e0;
@@ -10078,15 +10734,19 @@
10078
10734
  --ls-calendar-fg-darkest: black;
10079
10735
  --ls-calendar-bg-dark: #f0f2f5;
10080
10736
  --ls-calendar-fg-dark: black;
10081
- --ls-calendar-bg-light: #f9fafb;
10737
+ --ls-calendar-bg-light: white;
10082
10738
  --ls-calendar-fg-light: black;
10083
- --ls-calendar-bg-lightest: white;
10739
+ --ls-calendar-bg-lightest: #f9fafb;
10084
10740
  --ls-calendar-fg-lightest: black;
10085
10741
  --ls-calendar-bg-active: #3692fc;
10086
10742
  --ls-calendar-fg-active: white;
10087
10743
  --ls-calendar-fg-muted: #a7afb9;
10088
10744
  --ls-calendar-shadow-color: 0,0,0;
10089
- --ls-calendar-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
10745
+ --ls-border-alpha: 1;
10746
+ --ls-calendar-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10747
+ --ls-calendar-border-color-h: 210deg;
10748
+ --ls-calendar-border-color-s: 20%;
10749
+ --ls-calendar-border-color-l: 90%
10090
10750
  }
10091
10751
  .Card-light {
10092
10752
  --ls-card-bg-body: #d1d9e0;
@@ -10094,15 +10754,19 @@
10094
10754
  --ls-card-fg-darkest: black;
10095
10755
  --ls-card-bg-dark: #f0f2f5;
10096
10756
  --ls-card-fg-dark: black;
10097
- --ls-card-bg-light: #f9fafb;
10757
+ --ls-card-bg-light: white;
10098
10758
  --ls-card-fg-light: black;
10099
- --ls-card-bg-lightest: white;
10759
+ --ls-card-bg-lightest: #f9fafb;
10100
10760
  --ls-card-fg-lightest: black;
10101
10761
  --ls-card-bg-active: #3692fc;
10102
10762
  --ls-card-fg-active: white;
10103
10763
  --ls-card-fg-muted: #a7afb9;
10104
10764
  --ls-card-shadow-color: 0,0,0;
10105
- --ls-card-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
10765
+ --ls-border-alpha: 1;
10766
+ --ls-card-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10767
+ --ls-card-border-color-h: 210deg;
10768
+ --ls-card-border-color-s: 20%;
10769
+ --ls-card-border-color-l: 90%
10106
10770
  }
10107
10771
  .Caret-light {
10108
10772
  --ls-caret-bg-body: #d1d9e0;
@@ -10110,15 +10774,19 @@
10110
10774
  --ls-caret-fg-darkest: black;
10111
10775
  --ls-caret-bg-dark: #f0f2f5;
10112
10776
  --ls-caret-fg-dark: black;
10113
- --ls-caret-bg-light: #f9fafb;
10777
+ --ls-caret-bg-light: white;
10114
10778
  --ls-caret-fg-light: black;
10115
- --ls-caret-bg-lightest: white;
10779
+ --ls-caret-bg-lightest: #f9fafb;
10116
10780
  --ls-caret-fg-lightest: black;
10117
10781
  --ls-caret-bg-active: #3692fc;
10118
10782
  --ls-caret-fg-active: white;
10119
10783
  --ls-caret-fg-muted: #a7afb9;
10120
10784
  --ls-caret-shadow-color: 0,0,0;
10121
- --ls-caret-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
10785
+ --ls-border-alpha: 1;
10786
+ --ls-caret-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10787
+ --ls-caret-border-color-h: 210deg;
10788
+ --ls-caret-border-color-s: 20%;
10789
+ --ls-caret-border-color-l: 90%
10122
10790
  }
10123
10791
  .Toast-light {
10124
10792
  --ls-toast-bg-body: #d1d9e0;
@@ -10126,15 +10794,79 @@
10126
10794
  --ls-toast-fg-darkest: black;
10127
10795
  --ls-toast-bg-dark: #f0f2f5;
10128
10796
  --ls-toast-fg-dark: black;
10129
- --ls-toast-bg-light: #f9fafb;
10797
+ --ls-toast-bg-light: white;
10130
10798
  --ls-toast-fg-light: black;
10131
- --ls-toast-bg-lightest: white;
10799
+ --ls-toast-bg-lightest: #f9fafb;
10132
10800
  --ls-toast-fg-lightest: black;
10133
10801
  --ls-toast-bg-active: #3692fc;
10134
10802
  --ls-toast-fg-active: white;
10135
10803
  --ls-toast-fg-muted: #a7afb9;
10136
10804
  --ls-toast-shadow-color: 0,0,0;
10137
- --ls-toast-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
10805
+ --ls-border-alpha: 1;
10806
+ --ls-toast-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10807
+ --ls-toast-border-color-h: 210deg;
10808
+ --ls-toast-border-color-s: 20%;
10809
+ --ls-toast-border-color-l: 90%
10810
+ }
10811
+ .Btn-light {
10812
+ --ls-btn-bg-body: #d1d9e0;
10813
+ --ls-btn-bg-darkest: #e0e6eb;
10814
+ --ls-btn-fg-darkest: black;
10815
+ --ls-btn-bg-dark: #f0f2f5;
10816
+ --ls-btn-fg-dark: black;
10817
+ --ls-btn-bg-light: white;
10818
+ --ls-btn-fg-light: black;
10819
+ --ls-btn-bg-lightest: #f9fafb;
10820
+ --ls-btn-fg-lightest: black;
10821
+ --ls-btn-bg-active: #3692fc;
10822
+ --ls-btn-fg-active: white;
10823
+ --ls-btn-fg-muted: #a7afb9;
10824
+ --ls-btn-shadow-color: 0,0,0;
10825
+ --ls-border-alpha: 1;
10826
+ --ls-btn-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10827
+ --ls-btn-border-color-h: 210deg;
10828
+ --ls-btn-border-color-s: 20%;
10829
+ --ls-btn-border-color-l: 90%
10830
+ }
10831
+ .Btn-outline-light {
10832
+ --ls-btn-bg-body: #d1d9e0;
10833
+ --ls-btn-bg-darkest: #e0e6eb;
10834
+ --ls-btn-fg-darkest: black;
10835
+ --ls-btn-bg-dark: #f0f2f5;
10836
+ --ls-btn-fg-dark: black;
10837
+ --ls-btn-bg-light: white;
10838
+ --ls-btn-fg-light: black;
10839
+ --ls-btn-bg-lightest: #f9fafb;
10840
+ --ls-btn-fg-lightest: black;
10841
+ --ls-btn-bg-active: #3692fc;
10842
+ --ls-btn-fg-active: white;
10843
+ --ls-btn-fg-muted: #a7afb9;
10844
+ --ls-btn-shadow-color: 0,0,0;
10845
+ --ls-border-alpha: 1;
10846
+ --ls-btn-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10847
+ --ls-btn-border-color-h: 210deg;
10848
+ --ls-btn-border-color-s: 20%;
10849
+ --ls-btn-border-color-l: 90%
10850
+ }
10851
+ .List-item-light {
10852
+ --ls-lst-bg-body: #d1d9e0;
10853
+ --ls-lst-bg-darkest: #e0e6eb;
10854
+ --ls-lst-fg-darkest: black;
10855
+ --ls-lst-bg-dark: #f0f2f5;
10856
+ --ls-lst-fg-dark: black;
10857
+ --ls-lst-bg-light: white;
10858
+ --ls-lst-fg-light: black;
10859
+ --ls-lst-bg-lightest: #f9fafb;
10860
+ --ls-lst-fg-lightest: black;
10861
+ --ls-lst-bg-active: #3692fc;
10862
+ --ls-lst-fg-active: white;
10863
+ --ls-lst-fg-muted: #a7afb9;
10864
+ --ls-lst-shadow-color: 0,0,0;
10865
+ --ls-border-alpha: 1;
10866
+ --ls-lst-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1));
10867
+ --ls-lst-border-color-h: 210deg;
10868
+ --ls-lst-border-color-s: 20%;
10869
+ --ls-lst-border-color-l: 90%
10138
10870
  }
10139
10871
  .Theme-dark {
10140
10872
  --ls-bg-body: #171a1c;
@@ -10150,7 +10882,11 @@
10150
10882
  --ls-fg-active: white;
10151
10883
  --ls-fg-muted: #a7afb9;
10152
10884
  --ls-shadow-color: 255,255,255;
10153
- --ls-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
10885
+ --ls-border-alpha: 1;
10886
+ --ls-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
10887
+ --ls-border-color-h: 210deg;
10888
+ --ls-border-color-s: 10%;
10889
+ --ls-border-color-l: 45%
10154
10890
  }
10155
10891
  .Theme-dark:not(.Theme-outline) .Btn-close {
10156
10892
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10169,7 +10905,11 @@
10169
10905
  --ls-alert-fg-active: white;
10170
10906
  --ls-alert-fg-muted: #a7afb9;
10171
10907
  --ls-alert-shadow-color: 255,255,255;
10172
- --ls-alert-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
10908
+ --ls-border-alpha: 1;
10909
+ --ls-alert-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
10910
+ --ls-alert-border-color-h: 210deg;
10911
+ --ls-alert-border-color-s: 10%;
10912
+ --ls-alert-border-color-l: 45%
10173
10913
  }
10174
10914
  .Alert-dark:not(.Alert-outline) .Btn-close {
10175
10915
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10188,7 +10928,11 @@
10188
10928
  --ls-calendar-fg-active: white;
10189
10929
  --ls-calendar-fg-muted: #a7afb9;
10190
10930
  --ls-calendar-shadow-color: 255,255,255;
10191
- --ls-calendar-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
10931
+ --ls-border-alpha: 1;
10932
+ --ls-calendar-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
10933
+ --ls-calendar-border-color-h: 210deg;
10934
+ --ls-calendar-border-color-s: 10%;
10935
+ --ls-calendar-border-color-l: 45%
10192
10936
  }
10193
10937
  .Calendar-dark:not(.Calendar-outline) .Btn-close {
10194
10938
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10207,7 +10951,11 @@
10207
10951
  --ls-card-fg-active: white;
10208
10952
  --ls-card-fg-muted: #a7afb9;
10209
10953
  --ls-card-shadow-color: 255,255,255;
10210
- --ls-card-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
10954
+ --ls-border-alpha: 1;
10955
+ --ls-card-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
10956
+ --ls-card-border-color-h: 210deg;
10957
+ --ls-card-border-color-s: 10%;
10958
+ --ls-card-border-color-l: 45%
10211
10959
  }
10212
10960
  .Card-dark:not(.Card-outline) .Btn-close {
10213
10961
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10226,7 +10974,11 @@
10226
10974
  --ls-caret-fg-active: white;
10227
10975
  --ls-caret-fg-muted: #a7afb9;
10228
10976
  --ls-caret-shadow-color: 255,255,255;
10229
- --ls-caret-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
10977
+ --ls-border-alpha: 1;
10978
+ --ls-caret-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
10979
+ --ls-caret-border-color-h: 210deg;
10980
+ --ls-caret-border-color-s: 10%;
10981
+ --ls-caret-border-color-l: 45%
10230
10982
  }
10231
10983
  .Caret-dark:not(.Caret-outline) .Btn-close {
10232
10984
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10245,11 +10997,84 @@
10245
10997
  --ls-toast-fg-active: white;
10246
10998
  --ls-toast-fg-muted: #a7afb9;
10247
10999
  --ls-toast-shadow-color: 255,255,255;
10248
- --ls-toast-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
11000
+ --ls-border-alpha: 1;
11001
+ --ls-toast-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
11002
+ --ls-toast-border-color-h: 210deg;
11003
+ --ls-toast-border-color-s: 10%;
11004
+ --ls-toast-border-color-l: 45%
10249
11005
  }
10250
11006
  .Toast-dark:not(.Toast-outline) .Btn-close {
10251
11007
  filter: invert(1) grayscale(100%) brightness(200%)
10252
11008
  }
11009
+ .Btn-dark {
11010
+ --ls-btn-bg-body: #171a1c;
11011
+ --ls-btn-bg-darkest: #22262a;
11012
+ --ls-btn-fg-darkest: white;
11013
+ --ls-btn-bg-dark: #394046;
11014
+ --ls-btn-fg-dark: white;
11015
+ --ls-btn-bg-light: #454d54;
11016
+ --ls-btn-fg-light: white;
11017
+ --ls-btn-bg-lightest: #5c6670;
11018
+ --ls-btn-fg-lightest: white;
11019
+ --ls-btn-bg-active: #8965cd;
11020
+ --ls-btn-fg-active: white;
11021
+ --ls-btn-fg-muted: #a7afb9;
11022
+ --ls-btn-shadow-color: 255,255,255;
11023
+ --ls-border-alpha: 1;
11024
+ --ls-btn-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
11025
+ --ls-btn-border-color-h: 210deg;
11026
+ --ls-btn-border-color-s: 10%;
11027
+ --ls-btn-border-color-l: 45%
11028
+ }
11029
+ .Btn-dark:not(.Btn-outline) .Btn-close {
11030
+ filter: invert(1) grayscale(100%) brightness(200%)
11031
+ }
11032
+ .Btn-outline-dark {
11033
+ --ls-btn-bg-body: #171a1c;
11034
+ --ls-btn-bg-darkest: #22262a;
11035
+ --ls-btn-fg-darkest: white;
11036
+ --ls-btn-bg-dark: #394046;
11037
+ --ls-btn-fg-dark: white;
11038
+ --ls-btn-bg-light: #454d54;
11039
+ --ls-btn-fg-light: white;
11040
+ --ls-btn-bg-lightest: #5c6670;
11041
+ --ls-btn-fg-lightest: white;
11042
+ --ls-btn-bg-active: #8965cd;
11043
+ --ls-btn-fg-active: white;
11044
+ --ls-btn-fg-muted: #a7afb9;
11045
+ --ls-btn-shadow-color: 255,255,255;
11046
+ --ls-border-alpha: 1;
11047
+ --ls-btn-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
11048
+ --ls-btn-border-color-h: 210deg;
11049
+ --ls-btn-border-color-s: 10%;
11050
+ --ls-btn-border-color-l: 45%
11051
+ }
11052
+ .Btn-outline-dark:not(.Btn-outline-outline) .Btn-close {
11053
+ filter: invert(1) grayscale(100%) brightness(200%)
11054
+ }
11055
+ .List-item-dark {
11056
+ --ls-lst-bg-body: #171a1c;
11057
+ --ls-lst-bg-darkest: #22262a;
11058
+ --ls-lst-fg-darkest: white;
11059
+ --ls-lst-bg-dark: #394046;
11060
+ --ls-lst-fg-dark: white;
11061
+ --ls-lst-bg-light: #454d54;
11062
+ --ls-lst-fg-light: white;
11063
+ --ls-lst-bg-lightest: #5c6670;
11064
+ --ls-lst-fg-lightest: white;
11065
+ --ls-lst-bg-active: #8965cd;
11066
+ --ls-lst-fg-active: white;
11067
+ --ls-lst-fg-muted: #a7afb9;
11068
+ --ls-lst-shadow-color: 255,255,255;
11069
+ --ls-border-alpha: 1;
11070
+ --ls-lst-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1));
11071
+ --ls-lst-border-color-h: 210deg;
11072
+ --ls-lst-border-color-s: 10%;
11073
+ --ls-lst-border-color-l: 45%
11074
+ }
11075
+ .List-item-dark:not(.List-item-outline) .Btn-close {
11076
+ filter: invert(1) grayscale(100%) brightness(200%)
11077
+ }
10253
11078
  .Theme-night {
10254
11079
  --ls-bg-body: #0d0d0d;
10255
11080
  --ls-bg-darkest: #1a1a1a;
@@ -10264,7 +11089,11 @@
10264
11089
  --ls-fg-active: white;
10265
11090
  --ls-fg-muted: #a7afb9;
10266
11091
  --ls-shadow-color: 255,255,255;
10267
- --ls-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
11092
+ --ls-border-alpha: 1;
11093
+ --ls-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11094
+ --ls-border-color-h: 0deg;
11095
+ --ls-border-color-s: 0%;
11096
+ --ls-border-color-l: 35%
10268
11097
  }
10269
11098
  .Theme-night:not(.Theme-outline) .Btn-close {
10270
11099
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10283,7 +11112,11 @@
10283
11112
  --ls-alert-fg-active: white;
10284
11113
  --ls-alert-fg-muted: #a7afb9;
10285
11114
  --ls-alert-shadow-color: 255,255,255;
10286
- --ls-alert-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
11115
+ --ls-border-alpha: 1;
11116
+ --ls-alert-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11117
+ --ls-alert-border-color-h: 0deg;
11118
+ --ls-alert-border-color-s: 0%;
11119
+ --ls-alert-border-color-l: 35%
10287
11120
  }
10288
11121
  .Alert-night:not(.Alert-outline) .Btn-close {
10289
11122
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10302,7 +11135,11 @@
10302
11135
  --ls-calendar-fg-active: white;
10303
11136
  --ls-calendar-fg-muted: #a7afb9;
10304
11137
  --ls-calendar-shadow-color: 255,255,255;
10305
- --ls-calendar-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
11138
+ --ls-border-alpha: 1;
11139
+ --ls-calendar-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11140
+ --ls-calendar-border-color-h: 0deg;
11141
+ --ls-calendar-border-color-s: 0%;
11142
+ --ls-calendar-border-color-l: 35%
10306
11143
  }
10307
11144
  .Calendar-night:not(.Calendar-outline) .Btn-close {
10308
11145
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10321,7 +11158,11 @@
10321
11158
  --ls-card-fg-active: white;
10322
11159
  --ls-card-fg-muted: #a7afb9;
10323
11160
  --ls-card-shadow-color: 255,255,255;
10324
- --ls-card-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
11161
+ --ls-border-alpha: 1;
11162
+ --ls-card-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11163
+ --ls-card-border-color-h: 0deg;
11164
+ --ls-card-border-color-s: 0%;
11165
+ --ls-card-border-color-l: 35%
10325
11166
  }
10326
11167
  .Card-night:not(.Card-outline) .Btn-close {
10327
11168
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10340,7 +11181,11 @@
10340
11181
  --ls-caret-fg-active: white;
10341
11182
  --ls-caret-fg-muted: #a7afb9;
10342
11183
  --ls-caret-shadow-color: 255,255,255;
10343
- --ls-caret-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
11184
+ --ls-border-alpha: 1;
11185
+ --ls-caret-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11186
+ --ls-caret-border-color-h: 0deg;
11187
+ --ls-caret-border-color-s: 0%;
11188
+ --ls-caret-border-color-l: 35%
10344
11189
  }
10345
11190
  .Caret-night:not(.Caret-outline) .Btn-close {
10346
11191
  filter: invert(1) grayscale(100%) brightness(200%)
@@ -10359,8 +11204,81 @@
10359
11204
  --ls-toast-fg-active: white;
10360
11205
  --ls-toast-fg-muted: #a7afb9;
10361
11206
  --ls-toast-shadow-color: 255,255,255;
10362
- --ls-toast-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
11207
+ --ls-border-alpha: 1;
11208
+ --ls-toast-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11209
+ --ls-toast-border-color-h: 0deg;
11210
+ --ls-toast-border-color-s: 0%;
11211
+ --ls-toast-border-color-l: 35%
10363
11212
  }
10364
11213
  .Toast-night:not(.Toast-outline) .Btn-close {
10365
11214
  filter: invert(1) grayscale(100%) brightness(200%)
11215
+ }
11216
+ .Btn-night {
11217
+ --ls-btn-bg-body: #0d0d0d;
11218
+ --ls-btn-bg-darkest: #1a1a1a;
11219
+ --ls-btn-fg-darkest: white;
11220
+ --ls-btn-bg-dark: #262626;
11221
+ --ls-btn-fg-dark: white;
11222
+ --ls-btn-bg-light: #333333;
11223
+ --ls-btn-fg-light: white;
11224
+ --ls-btn-bg-lightest: #4d4d4d;
11225
+ --ls-btn-fg-lightest: white;
11226
+ --ls-btn-bg-active: #8965cd;
11227
+ --ls-btn-fg-active: white;
11228
+ --ls-btn-fg-muted: #a7afb9;
11229
+ --ls-btn-shadow-color: 255,255,255;
11230
+ --ls-border-alpha: 1;
11231
+ --ls-btn-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11232
+ --ls-btn-border-color-h: 0deg;
11233
+ --ls-btn-border-color-s: 0%;
11234
+ --ls-btn-border-color-l: 35%
11235
+ }
11236
+ .Btn-night:not(.Btn-outline) .Btn-close {
11237
+ filter: invert(1) grayscale(100%) brightness(200%)
11238
+ }
11239
+ .Btn-outline-night {
11240
+ --ls-btn-bg-body: #0d0d0d;
11241
+ --ls-btn-bg-darkest: #1a1a1a;
11242
+ --ls-btn-fg-darkest: white;
11243
+ --ls-btn-bg-dark: #262626;
11244
+ --ls-btn-fg-dark: white;
11245
+ --ls-btn-bg-light: #333333;
11246
+ --ls-btn-fg-light: white;
11247
+ --ls-btn-bg-lightest: #4d4d4d;
11248
+ --ls-btn-fg-lightest: white;
11249
+ --ls-btn-bg-active: #8965cd;
11250
+ --ls-btn-fg-active: white;
11251
+ --ls-btn-fg-muted: #a7afb9;
11252
+ --ls-btn-shadow-color: 255,255,255;
11253
+ --ls-border-alpha: 1;
11254
+ --ls-btn-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11255
+ --ls-btn-border-color-h: 0deg;
11256
+ --ls-btn-border-color-s: 0%;
11257
+ --ls-btn-border-color-l: 35%
11258
+ }
11259
+ .Btn-outline-night:not(.Btn-outline-outline) .Btn-close {
11260
+ filter: invert(1) grayscale(100%) brightness(200%)
11261
+ }
11262
+ .List-item-night {
11263
+ --ls-lst-bg-body: #0d0d0d;
11264
+ --ls-lst-bg-darkest: #1a1a1a;
11265
+ --ls-lst-fg-darkest: white;
11266
+ --ls-lst-bg-dark: #262626;
11267
+ --ls-lst-fg-dark: white;
11268
+ --ls-lst-bg-light: #333333;
11269
+ --ls-lst-fg-light: white;
11270
+ --ls-lst-bg-lightest: #4d4d4d;
11271
+ --ls-lst-fg-lightest: white;
11272
+ --ls-lst-bg-active: #8965cd;
11273
+ --ls-lst-fg-active: white;
11274
+ --ls-lst-fg-muted: #a7afb9;
11275
+ --ls-lst-shadow-color: 255,255,255;
11276
+ --ls-border-alpha: 1;
11277
+ --ls-lst-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1));
11278
+ --ls-lst-border-color-h: 0deg;
11279
+ --ls-lst-border-color-s: 0%;
11280
+ --ls-lst-border-color-l: 35%
11281
+ }
11282
+ .List-item-night:not(.List-item-outline) .Btn-close {
11283
+ filter: invert(1) grayscale(100%) brightness(200%)
10366
11284
  }