mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

improve constrast to meet AA standard

pull/706/head
Cory LaViska 2022-03-16 17:45:06 -04:00
rodzic ba3306b497
commit ad0ac34f9d
28 zmienionych plików z 194 dodań i 190 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
docs/assets/images/logo.svg
Wyświetl plik

@ -1,6 +1,6 @@
<svg viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill-rule="nonzero" fill="#0ea5e9">
<g fill-rule="nonzero" fill="#0984c7">
<path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"></path>
</g>
</g>

Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 3.8 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 3.8 KiB

BIN
docs/assets/images/og-image.png
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 27 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 28 KiB

BIN
docs/assets/images/touch-icon.png
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 7.3 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 7.4 KiB

BIN
docs/assets/images/twitter-card.png
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 55 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 55 KiB

14
docs/assets/images/undraw-content-team.svg
Wyświetl plik

@ -22,7 +22,7 @@
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(480.586874, 208.953401) rotate(-40.261060) translate(-480.586874, -208.953401) " cx="480.586874" cy="208.953401" rx="10.63605" ry="3.98853"></ellipse>
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="457.85318" cy="143.08115" r="14.35864"></circle>
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="451.95181" cy="137.93436" r="4.78622"></circle>
<path d="M493.93625,107.65269 C494.56802,92.0991 481.16312,78.92509 463.99545,78.22776 C446.82778,77.53043 432.39853,89.57376 431.76672,105.12736 C431.13491,120.68096 443.06863,124.21482 460.23627,124.91221 C477.40391,125.6096 493.30447,123.20627 493.93625,107.65269 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
<path d="M493.93625,107.65269 C494.56802,92.0991 481.16312,78.92509 463.99545,78.22776 C446.82778,77.53043 432.39853,89.57376 431.76672,105.12736 C431.13491,120.68096 443.06863,124.21482 460.23627,124.91221 C477.40391,125.6096 493.30447,123.20627 493.93625,107.65269 Z" id="Path" fill="#0984c7" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(422.001785, 145.703659) rotate(-77.089900) translate(-422.001785, -145.703659) " cx="422.001785" cy="145.703659" rx="6.59448" ry="21.00616"></ellipse>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(504.470422, 159.418119) rotate(-77.089900) translate(-504.470422, -159.418119) " cx="504.470422" cy="159.418119" rx="6.59448" ry="21.00616"></ellipse>
<path d="M472.3331,169.91416 C472.9488,173.280144 471.720947,176.718794 469.112518,178.933525 C466.504089,181.148255 462.911834,181.802199 459.690258,180.648779 C456.468682,179.495358 454.107795,176.710012 453.4978,173.34299 L453.49445,173.3245 C452.5527,168.12235 456.57483,166.2815 461.77701,165.33976 C466.97919,164.39802 471.39139,164.71201 472.3331,169.91416 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
@ -32,7 +32,7 @@
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="278.92063" y="359.95537" width="13.08374" height="23.44171"></rect>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="263.65629" cy="383.66967" rx="10.90314" ry="4.08868"></ellipse>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="289.82377" cy="383.12453" rx="10.90314" ry="4.08868"></ellipse>
<path d="M230.60203,286.10434 C227.12455,270.53055 238.2407,254.79388 255.43064,250.9555 C272.62058,247.11712 289.37486,256.63058 292.85233,272.20438 C296.3298,287.77818 284.93742,293.52203 267.74748,297.36038 C250.55754,301.19873 234.07951,301.67812 230.60203,286.10434 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
<path d="M230.60203,286.10434 C227.12455,270.53055 238.2407,254.79388 255.43064,250.9555 C272.62058,247.11712 289.37486,256.63058 292.85233,272.20438 C296.3298,287.77818 284.93742,293.52203 267.74748,297.36038 C250.55754,301.19873 234.07951,301.67812 230.60203,286.10434 Z" id="Path" fill="#0984c7" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(223.870603, 306.172293) rotate(-64.625740) translate(-223.870603, -306.172293) " cx="223.870603" cy="306.172293" rx="6.76007" ry="21.53368"></ellipse>
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="85.9008" cy="369.76318" r="43.06733"></circle>
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="66.27519" y="403.56287" width="13.08374" height="23.44171"></rect>
@ -41,7 +41,7 @@
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="103.34581" cy="426.732" rx="10.90314" ry="4.08868"></ellipse>
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="86.99113" cy="358.86008" r="14.71922"></circle>
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="86.99113" cy="358.86008" r="4.90642"></circle>
<path d="M44.12401,329.71183 C40.64653,314.13804 51.76268,298.4014 68.95262,294.56302 C86.14256,290.72464 102.89683,300.23813 106.37431,315.81192 C109.85179,331.38571 98.45939,337.12961 81.26945,340.96792 C64.07951,344.80623 47.60154,345.28568 44.12401,329.71183 Z" id="Path" fill="#E6E6E6" fill-rule="nonzero"></path>
<path d="M44.12401,329.71183 C40.64653,314.13804 51.76268,298.4014 68.95262,294.56302 C86.14256,290.72464 102.89683,300.23813 106.37431,315.81192 C109.85179,331.38571 98.45939,337.12961 81.26945,340.96792 C64.07951,344.80623 47.60154,345.28568 44.12401,329.71183 Z" id="Path" fill="#0f84c7" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(110.988725, 213.490755) rotate(-69.082170) translate(-110.988725, -213.490755) " cx="110.988725" cy="213.490755" rx="21.53369" ry="6.76007"></ellipse>
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(71.181568, 246.012788) rotate(-80.782520) translate(-71.181568, -246.012788) " cx="71.1815681" cy="246.012788" r="43.06735"></circle>
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="51.55595" y="279.81244" width="13.08374" height="23.44171"></rect>
@ -50,7 +50,7 @@
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="88.62657" cy="302.9816" rx="10.90314" ry="4.08868"></ellipse>
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="72.27189" cy="235.10965" r="14.71922"></circle>
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="72.27189" cy="235.10965" r="4.90642"></circle>
<path d="M29.40483,205.96134 C25.92735,190.38755 37.0435,174.65088 54.23344,170.8125 C71.42338,166.97412 88.17766,176.48758 91.65513,192.06138 C95.1326,207.63518 83.74022,213.37903 66.55028,217.21738 C49.36034,221.05573 32.88231,221.53519 29.40483,205.96134 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
<path d="M29.40483,205.96134 C25.92735,190.38755 37.0435,174.65088 54.23344,170.8125 C71.42338,166.97412 88.17766,176.48758 91.65513,192.06138 C95.1326,207.63518 83.74022,213.37903 66.55028,217.21738 C49.36034,221.05573 32.88231,221.53519 29.40483,205.96134 Z" id="Path" fill="#0984c7" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(22.673401, 226.029366) rotate(-64.625740) translate(-22.673401, -226.029366) " cx="22.6734006" cy="226.029366" rx="6.76007" ry="21.53368"></ellipse>
<path d="M50.02702,261.54972 C50.02702,265.76487 60.88029,274.08829 72.92357,274.08829 C84.96685,274.08829 96.25871,262.22129 96.25871,258.0062 C96.25871,253.79111 84.96678,258.82395 72.92357,258.82395 C60.88036,258.82395 50.02702,257.33457 50.02702,261.54972 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M113.52376,81.56869 C111.867655,81.5704977 110.525568,82.9125851 110.52376,84.56869 L110.52376,208.56869 C110.525568,210.224795 111.867655,211.566882 113.52376,211.56869 L400.52376,211.56869 C402.179865,211.566882 403.521952,210.224795 403.52376,208.56869 L403.52376,84.56869 C403.521952,82.9125851 402.179865,81.5704977 400.52376,81.56869 L113.52376,81.56869 Z" id="Path" fill="#fbc024" fill-rule="nonzero"></path>
@ -67,13 +67,13 @@
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="725.31949" cy="403.22896" r="4.90642"></circle>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(771.918005, 384.148727) rotate(-53.549900) translate(-771.918005, -384.148727) " cx="771.918005" cy="384.148727" rx="21.53368" ry="6.76007"></ellipse>
<path d="M705.39698,436.33866 C705.39698,432.86466 714.34198,426.00466 724.26778,426.00466 C734.19358,426.00466 743.50006,435.78516 743.50006,439.25914 C743.50006,442.73312 734.19351,438.58514 724.26778,438.58514 C714.34205,438.58514 705.39698,439.81268 705.39698,436.33866 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero" transform="translate(724.448520, 433.325266) rotate(-180.000000) translate(-724.448520, -433.325266) "></path>
<path d="M847.1767,378.54172 L611.43117,345.86064 C607.604361,345.32541 604.932725,341.793834 605.45868,337.96574 L631.96057,146.79396 C632.495641,142.967058 636.027329,140.295337 639.85547,140.82147 L875.60098,173.50256 C879.427885,174.037626 882.099609,177.569318 881.57347,181.39746 L855.0716,372.56924 C854.536375,376.396051 851.004794,379.067687 847.1767,378.54172 L847.1767,378.54172 Z" id="Path" fill="#11a5e9" fill-rule="nonzero"></path>
<path d="M847.1767,378.54172 L611.43117,345.86064 C607.604361,345.32541 604.932725,341.793834 605.45868,337.96574 L631.96057,146.79396 C632.495641,142.967058 636.027329,140.295337 639.85547,140.82147 L875.60098,173.50256 C879.427885,174.037626 882.099609,177.569318 881.57347,181.39746 L855.0716,372.56924 C854.536375,376.396051 851.004794,379.067687 847.1767,378.54172 L847.1767,378.54172 Z" id="Path" fill="#8b5cf6" fill-rule="nonzero"></path>
<path d="M762.72231,318.87957 L642.36784,302.19498 C642.216871,302.176045 642.067969,302.14324 641.92302,302.09698 L712.51355,211.39072 C713.394132,210.238632 714.82651,209.649483 716.262854,209.8486 C717.699198,210.047717 718.917295,211.004295 719.45127,212.35248 L748.48059,283.8148 L749.87186,287.23459 L762.72231,318.87957 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<polygon id="Path" fill="#000000" fill-rule="nonzero" opacity="0.2" points="762.722 318.879 721.63 313.183 745.864 286.679 747.609 284.77 748.481 283.815 749.872 287.235"></polygon>
<path d="M829.73481,328.16942 L725.63807,313.73863 L749.87186,287.23463 L751.61612,285.32515 L783.19533,250.78503 C784.29885,249.735613 785.796059,249.204111 787.314261,249.322828 C788.832463,249.441546 790.228856,250.199316 791.15584,251.40751 C791.271244,251.575507 791.375823,251.750689 791.46894,251.93199 L829.73481,328.16942 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="764.18602" cy="224.18353" r="18"></circle>
<rect id="Rectangle" fill="#3F3D56" fill-rule="nonzero" transform="translate(653.262165, 167.923576) rotate(7.892770) translate(-653.262165, -167.923576) " x="642.262129" y="156.923541" width="22.0000711" height="22.0000711"></rect>
<path d="M768.18655,374.08068 C771.66403,358.50689 760.54788,342.77022 743.35794,338.93184 C726.168,335.09346 709.41373,344.60692 705.93625,360.18071 C702.45877,375.7545 713.85117,381.49837 731.04111,385.33671 C748.23105,389.17505 764.70908,389.6545 768.18655,374.08068 Z" id="Path" fill="#F2F2F2" fill-rule="nonzero"></path>
<rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(653.262165, 167.923576) rotate(7.892770) translate(-653.262165, -167.923576) " x="642.262129" y="156.923541" width="22.0000711" height="22.0000711"></rect>
<path d="M768.18655,374.08068 C771.66403,358.50689 760.54788,342.77022 743.35794,338.93184 C726.168,335.09346 709.41373,344.60692 705.93625,360.18071 C702.45877,375.7545 713.85117,381.49837 731.04111,385.33671 C748.23105,389.17505 764.70908,389.6545 768.18655,374.08068 Z" id="Path" fill="#0f84c7" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(735.010556, 473.249892) rotate(-4.181640) translate(-735.010556, -473.249892) " cx="735.010556" cy="473.249892" rx="10.90314" ry="4.08868"></ellipse>
</g>
</g>

Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 19 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 19 KiB

2
docs/assets/images/undraw-not-found.svg
Wyświetl plik

File diff suppressed because one or more lines are too long
Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 6.8 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 6.8 KiB

2
docs/assets/images/wordmark.svg
Wyświetl plik

File diff suppressed because one or more lines are too long
Side by Side Swipe Nakładka

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 21 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 21 KiB

4
docs/assets/plugins/search/search.css
Wyświetl plik

@ -106,7 +106,7 @@ body.site-search-visible {
.site-search__results li[aria-selected='true'] a sl-icon {
outline: none;
color: var(--sl-color-neutral-0);
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
.sl-theme-dark .site-search__results li[aria-selected='true'] a,
@ -123,7 +123,7 @@ body.site-search-visible {
.site-search__results small {
display: block;
color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-700);
}
.site-search__result {

28
docs/assets/styles/docs.css
Wyświetl plik

@ -69,11 +69,12 @@ strong {
opacity: 1;
}
.sidebar-toggle:active .sidebar-toggle-button span {
.sidebar-toggle span,
.sidebar-toggle:active .sidebar-toggle span {
background-color: var(--sl-color-primary-700);
}
.sidebar-toggle:focus {
.sidebar-toggle:focus-visible {
outline: none;
box-shadow: var(--sl-focus-ring);
}
@ -290,10 +291,6 @@ strong {
padding: 2px 4px;
}
.markdown-section tr:nth-child(2n) code {
background-color: var(--sl-color-neutral-100);
}
kbd,
.markdown-section kbd {
font-family: var(--sl-font-mono);
@ -346,7 +343,7 @@ kbd,
.markdown-section pre .token.keyword,
.markdown-section pre .token.tag,
.markdown-section pre .token.url {
color: var(--sl-color-blue-700);
color: var(--sl-color-sky-700);
}
.markdown-section pre .token.symbol,
@ -411,8 +408,9 @@ kbd,
border: none;
}
.markdown-section tr,
.markdown-section tr:nth-child(2n) {
background: var(--sl-color-neutral-50);
background: none;
}
.markdown-section th {
@ -473,19 +471,19 @@ kbd,
}
.markdown-section p.warn {
border-left-color: var(--sl-color-primary-600);
border-left-color: var(--sl-color-primary-700);
}
.markdown-section p.warn:before {
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
.markdown-section p.tip {
border-left-color: var(--sl-color-danger-600);
border-left-color: var(--sl-color-danger-700);
}
.markdown-section p.tip:before {
background-color: var(--sl-color-danger-600);
background-color: var(--sl-color-danger-700);
}
.markdown-section p.tip code,
@ -554,7 +552,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
.border-radius-demo {
width: 3rem;
height: 3rem;
background: var(--sl-color-primary-600);
background: var(--sl-color-primary-700);
}
/* Transition demo */
@ -568,7 +566,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
.transition-demo:after {
content: '';
position: absolute;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
top: 0;
left: 0;
width: 0;
@ -584,7 +582,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
/* Spacing demo */
.spacing-demo {
width: 100px;
background: var(--sl-color-primary-600);
background: var(--sl-color-primary-700);
}
/* Elevation demo */

14
docs/components/animation.md
Wyświetl plik

@ -19,7 +19,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
margin: 1.5rem;
}
</style>
@ -33,7 +33,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
margin: 1.5rem;
}
`;
@ -117,7 +117,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
.animation-sandbox .box {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
.animation-sandbox .controls {
@ -163,7 +163,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
</style>
```
@ -181,7 +181,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
`;
@ -253,7 +253,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
</style>
```
@ -265,7 +265,7 @@ const css = `
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
}
`;

6
docs/resources/changelog.md
Wyświetl plik

@ -14,7 +14,13 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed a bug that prevented form submission from working as expected in some cases
- Fixed a bug that prevented `<sl-split-panel>` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703)
- Fixed a bug that prevented `<sl-color-picker>` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704)
- Improved accessibility throughout the docs
- Improved contrast in all components to meet the [Level AA](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) standard
- Improved accessibility of `<sl-dropdown>` so the trigger's expanded state is announced correctly
- Improved accessibility of `<sl-format-date>` but rendering a `<time>` element instead of plain text
- Improved accessibility of `<sl-select>` so disabled controls announce correct
- Refactored `<sl-radio>` to move selection logic into `<sl-radio-group>`
- Updated slot detection logic so it ignores visually hidden elements
- Upgraded the status of `<sl-visually-hidden>` from experimental to stable
## 2.0.0-beta.71

20
src/components/alert/alert.styles.ts
Wyświetl plik

@ -42,43 +42,43 @@ export default css`
}
.alert--primary {
border-top-color: var(--sl-color-primary-600);
border-top-color: var(--sl-color-primary-700);
}
.alert--primary .alert__icon {
color: var(--sl-color-primary-600);
color: var(--sl-color-primary-700);
}
.alert--success {
border-top-color: var(--sl-color-success-600);
border-top-color: var(--sl-color-success-700);
}
.alert--success .alert__icon {
color: var(--sl-color-success-600);
color: var(--sl-color-success-700);
}
.alert--neutral {
border-top-color: var(--sl-color-neutral-600);
border-top-color: var(--sl-color-neutral-700);
}
.alert--neutral .alert__icon {
color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-700);
}
.alert--warning {
border-top-color: var(--sl-color-warning-600);
border-top-color: var(--sl-color-warning-700);
}
.alert--warning .alert__icon {
color: var(--sl-color-warning-600);
color: var(--sl-color-warning-700);
}
.alert--danger {
border-top-color: var(--sl-color-danger-600);
border-top-color: var(--sl-color-danger-700);
}
.alert--danger .alert__icon {
color: var(--sl-color-danger-600);
color: var(--sl-color-danger-700);
}
.alert__message {

2
src/components/avatar/avatar.styles.ts
Wyświetl plik

@ -17,7 +17,7 @@ export default css`
position: relative;
width: var(--size);
height: var(--size);
background-color: var(--sl-color-neutral-400);
background-color: var(--sl-color-neutral-500);
font-family: var(--sl-font-sans);
font-size: calc(var(--size) * 0.5);
font-weight: var(--sl-font-weight-normal);

10
src/components/badge/badge.styles.ts
Wyświetl plik

@ -26,27 +26,27 @@ export default css`
/* Variant modifiers */
.badge--primary {
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
color: var(--sl-color-neutral-0);
}
.badge--success {
background-color: var(--sl-color-success-600);
background-color: var(--sl-color-success-700);
color: var(--sl-color-neutral-0);
}
.badge--neutral {
background-color: var(--sl-color-neutral-600);
background-color: var(--sl-color-neutral-700);
color: var(--sl-color-neutral-0);
}
.badge--warning {
background-color: var(--sl-color-warning-600);
background-color: var(--sl-color-warning-700);
color: var(--sl-color-neutral-0);
}
.badge--danger {
background-color: var(--sl-color-danger-600);
background-color: var(--sl-color-danger-700);
color: var(--sl-color-neutral-0);
}

8
src/components/breadcrumb-item/breadcrumb-item.styles.ts
Wyświetl plik

@ -15,7 +15,7 @@ export default css`
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-700);
line-height: var(--sl-line-height-normal);
white-space: nowrap;
}
@ -38,15 +38,15 @@ export default css`
}
:host(:not(:last-of-type)) .breadcrumb-item__label {
color: var(--sl-color-primary-600);
color: var(--sl-color-primary-700);
}
:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
color: var(--sl-color-primary-500);
color: var(--sl-color-primary-600);
}
:host(:not(:last-of-type)) .breadcrumb-item__label:active {
color: var(--sl-color-primary-600);
color: var(--sl-color-primary-700);
}
.breadcrumb-item__label${focusVisibleSelector} {

172
src/components/button/button.styles.ts
Wyświetl plik

@ -93,130 +93,130 @@ export default css`
/* Primary */
.button--standard.button--primary {
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-700);
color: var(--sl-color-neutral-0);
}
.button--standard.button--primary:hover:not(.button--disabled) {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
color: var(--sl-color-neutral-0);
}
.button--standard.button--primary:hover:not(.button--disabled) {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
color: var(--sl-color-neutral-0);
}
.button--standard.button--primary${focusVisibleSelector}:not(.button--disabled) {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
color: var(--sl-color-neutral-0);
box-shadow: var(--sl-focus-ring);
}
.button--standard.button--primary:active:not(.button--disabled) {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-700);
color: var(--sl-color-neutral-0);
}
/* Success */
.button--standard.button--success {
background-color: var(--sl-color-success-600);
border-color: var(--sl-color-success-600);
background-color: var(--sl-color-success-700);
border-color: var(--sl-color-success-700);
color: var(--sl-color-neutral-0);
}
.button--standard.button--success:hover:not(.button--disabled) {
background-color: var(--sl-color-success-500);
border-color: var(--sl-color-success-500);
background-color: var(--sl-color-success-600);
border-color: var(--sl-color-success-600);
color: var(--sl-color-neutral-0);
}
.button--standard.button--success${focusVisibleSelector}:not(.button--disabled) {
background-color: var(--sl-color-success-600);
border-color: var(--sl-color-success-600);
background-color: var(--sl-color-success-700);
border-color: var(--sl-color-success-700);
color: var(--sl-color-neutral-0);
box-shadow: var(--sl-focus-ring);
}
.button--standard.button--success:active:not(.button--disabled) {
background-color: var(--sl-color-success-600);
border-color: var(--sl-color-success-600);
background-color: var(--sl-color-success-700);
border-color: var(--sl-color-success-700);
color: var(--sl-color-neutral-0);
}
/* Neutral */
.button--standard.button--neutral {
background-color: var(--sl-color-neutral-700);
border-color: var(--sl-color-neutral-700);
color: var(--sl-color-neutral-0);
}
.button--standard.button--neutral:hover:not(.button--disabled) {
background-color: var(--sl-color-neutral-600);
border-color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-0);
}
.button--standard.button--neutral:hover:not(.button--disabled) {
background-color: var(--sl-color-neutral-500);
border-color: var(--sl-color-neutral-500);
color: var(--sl-color-neutral-0);
}
.button--standard.button--neutral${focusVisibleSelector}:not(.button--disabled) {
background-color: var(--sl-color-neutral-500);
border-color: var(--sl-color-neutral-500);
background-color: var(--sl-color-neutral-600);
border-color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-0);
box-shadow: var(--sl-focus-ring);
}
.button--standard.button--neutral:active:not(.button--disabled) {
background-color: var(--sl-color-neutral-600);
border-color: var(--sl-color-neutral-600);
background-color: var(--sl-color-neutral-700);
border-color: var(--sl-color-neutral-700);
color: var(--sl-color-neutral-0);
}
/* Warning */
.button--standard.button--warning {
background-color: var(--sl-color-warning-700);
border-color: var(--sl-color-warning-700);
color: var(--sl-color-neutral-0);
}
.button--standard.button--warning:hover:not(.button--disabled) {
background-color: var(--sl-color-warning-600);
border-color: var(--sl-color-warning-600);
color: var(--sl-color-neutral-0);
}
.button--standard.button--warning:hover:not(.button--disabled) {
background-color: var(--sl-color-warning-500);
border-color: var(--sl-color-warning-500);
color: var(--sl-color-neutral-0);
}
.button--standard.button--warning${focusVisibleSelector}:not(.button--disabled) {
background-color: var(--sl-color-warning-500);
border-color: var(--sl-color-warning-500);
background-color: var(--sl-color-warning-600);
border-color: var(--sl-color-warning-600);
color: var(--sl-color-neutral-0);
box-shadow: var(--sl-focus-ring);
}
.button--standard.button--warning:active:not(.button--disabled) {
background-color: var(--sl-color-warning-600);
border-color: var(--sl-color-warning-600);
background-color: var(--sl-color-warning-700);
border-color: var(--sl-color-warning-700);
color: var(--sl-color-neutral-0);
}
/* Danger */
.button--standard.button--danger {
background-color: var(--sl-color-danger-700);
border-color: var(--sl-color-danger-700);
color: var(--sl-color-neutral-0);
}
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: var(--sl-color-danger-600);
border-color: var(--sl-color-danger-600);
color: var(--sl-color-neutral-0);
}
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: var(--sl-color-danger-500);
border-color: var(--sl-color-danger-500);
color: var(--sl-color-neutral-0);
}
.button--standard.button--danger${focusVisibleSelector}:not(.button--disabled) {
background-color: var(--sl-color-danger-500);
border-color: var(--sl-color-danger-500);
background-color: var(--sl-color-danger-600);
border-color: var(--sl-color-danger-600);
color: var(--sl-color-neutral-0);
box-shadow: var(--sl-focus-ring);
}
.button--standard.button--danger:active:not(.button--disabled) {
background-color: var(--sl-color-danger-600);
border-color: var(--sl-color-danger-600);
background-color: var(--sl-color-danger-700);
border-color: var(--sl-color-danger-700);
color: var(--sl-color-neutral-0);
}
@ -237,134 +237,134 @@ export default css`
.button--outline.button--default:hover:not(.button--disabled),
.button--outline.button--default.button--checked:not(.button--disabled) {
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
background-color: var(--sl-color-primary-700);
color: var(--sl-color-neutral-0);
}
.button--outline.button--default${focusVisibleSelector}:not(.button--disabled) {
border-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}
.button--outline.button--default:active:not(.button--disabled) {
border-color: var(--sl-color-primary-700);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-800);
background-color: var(--sl-color-primary-800);
color: var(--sl-color-neutral-0);
}
/* Primary */
.button--outline.button--primary {
border-color: var(--sl-color-primary-600);
color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
color: var(--sl-color-primary-700);
}
.button--outline.button--primary:hover:not(.button--disabled),
.button--outline.button--primary.button--checked:not(.button--disabled) {
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
color: var(--sl-color-neutral-0);
}
.button--outline.button--primary${focusVisibleSelector}:not(.button--disabled) {
border-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}
.button--outline.button--primary:active:not(.button--disabled) {
border-color: var(--sl-color-primary-700);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-800);
background-color: var(--sl-color-primary-800);
color: var(--sl-color-neutral-0);
}
/* Success */
.button--outline.button--success {
border-color: var(--sl-color-success-600);
color: var(--sl-color-success-600);
border-color: var(--sl-color-success-700);
color: var(--sl-color-success-700);
}
.button--outline.button--success:hover:not(.button--disabled),
.button--outline.button--success.button--checked:not(.button--disabled) {
background-color: var(--sl-color-success-600);
background-color: var(--sl-color-success-700);
color: var(--sl-color-neutral-0);
}
.button--outline.button--success${focusVisibleSelector}:not(.button--disabled) {
border-color: var(--sl-color-success-500);
border-color: var(--sl-color-success-600);
box-shadow: var(--sl-focus-ring);
}
.button--outline.button--success:active:not(.button--disabled) {
border-color: var(--sl-color-success-700);
background-color: var(--sl-color-success-700);
border-color: var(--sl-color-success-800);
background-color: var(--sl-color-success-800);
color: var(--sl-color-neutral-0);
}
/* Neutral */
.button--outline.button--neutral {
border-color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-600);
border-color: var(--sl-color-neutral-700);
color: var(--sl-color-neutral-700);
}
.button--outline.button--neutral:hover:not(.button--disabled),
.button--outline.button--neutral.button--checked:not(.button--disabled) {
background-color: var(--sl-color-neutral-600);
background-color: var(--sl-color-neutral-700);
color: var(--sl-color-neutral-0);
}
.button--outline.button--neutral${focusVisibleSelector}:not(.button--disabled) {
border-color: var(--sl-color-neutral-500);
border-color: var(--sl-color-neutral-600);
box-shadow: var(--sl-focus-ring);
}
.button--outline.button--neutral:active:not(.button--disabled) {
border-color: var(--sl-color-neutral-700);
background-color: var(--sl-color-neutral-700);
border-color: var(--sl-color-neutral-800);
background-color: var(--sl-color-neutral-800);
color: var(--sl-color-neutral-0);
}
/* Warning */
.button--outline.button--warning {
border-color: var(--sl-color-warning-600);
color: var(--sl-color-warning-600);
border-color: var(--sl-color-warning-700);
color: var(--sl-color-warning-700);
}
.button--outline.button--warning:hover:not(.button--disabled),
.button--outline.button--warning.button--checked:not(.button--disabled) {
background-color: var(--sl-color-warning-600);
background-color: var(--sl-color-warning-700);
color: var(--sl-color-neutral-0);
}
.button--outline.button--warning${focusVisibleSelector}:not(.button--disabled) {
border-color: var(--sl-color-warning-500);
border-color: var(--sl-color-warning-600);
box-shadow: var(--sl-focus-ring);
}
.button--outline.button--warning:active:not(.button--disabled) {
border-color: var(--sl-color-warning-700);
background-color: var(--sl-color-warning-700);
border-color: var(--sl-color-warning-800);
background-color: var(--sl-color-warning-800);
color: var(--sl-color-neutral-0);
}
/* Danger */
.button--outline.button--danger {
border-color: var(--sl-color-danger-600);
color: var(--sl-color-danger-600);
border-color: var(--sl-color-danger-700);
color: var(--sl-color-danger-700);
}
.button--outline.button--danger:hover:not(.button--disabled),
.button--outline.button--danger.button--checked:not(.button--disabled) {
background-color: var(--sl-color-danger-600);
background-color: var(--sl-color-danger-700);
color: var(--sl-color-neutral-0);
}
.button--outline.button--danger${focusVisibleSelector}:not(.button--disabled) {
border-color: var(--sl-color-danger-500);
border-color: var(--sl-color-danger-600);
box-shadow: var(--sl-focus-ring);
}
.button--outline.button--danger:active:not(.button--disabled) {
border-color: var(--sl-color-danger-700);
background-color: var(--sl-color-danger-700);
border-color: var(--sl-color-danger-800);
background-color: var(--sl-color-danger-800);
color: var(--sl-color-neutral-0);
}
@ -375,19 +375,19 @@ export default css`
.button--text {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-600);
color: var(--sl-color-primary-700);
}
.button--text:hover:not(.button--disabled) {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-500);
color: var(--sl-color-primary-600);
}
.button--text${focusVisibleSelector}:not(.button--disabled) {
background-color: transparent;
border-color: transparent;
color: var(--sl-color-primary-500);
color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}
@ -628,7 +628,7 @@ export default css`
top: 0;
left: 0;
bottom: 0;
border-left: solid 1px rgb(128 128 128 / 33%);
border-left: solid 1px rgb(128 128 128 / 40%);
mix-blend-mode: multiply;
}

12
src/components/checkbox/checkbox.styles.ts
Wyświetl plik

@ -73,15 +73,15 @@ export default css`
/* Checked/indeterminate */
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
background-color: var(--sl-color-primary-700);
}
/* Checked/indeterminate + hover */
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
}
/* Checked/indeterminate + focus */
@ -89,8 +89,8 @@ export default css`
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
.checkbox__input${focusVisibleSelector}
~ .checkbox__control {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}

2
src/components/menu-item/menu-item.styles.ts
Wyświetl plik

@ -64,7 +64,7 @@ export default css`
:host(:hover:not([aria-disabled='true'])) .menu-item,
:host(${focusVisibleSelector}:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
outline: none;
background-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
color: var(--sl-color-neutral-0);
}

2
src/components/progress-bar/progress-bar.styles.ts
Wyświetl plik

@ -7,7 +7,7 @@ export default css`
:host {
--height: 1rem;
--track-color: var(--sl-color-neutral-200);
--indicator-color: var(--sl-color-primary-600);
--indicator-color: var(--sl-color-primary-700);
--label-color: var(--sl-color-neutral-0);
display: block;

2
src/components/progress-ring/progress-ring.styles.ts
Wyświetl plik

@ -8,7 +8,7 @@ export default css`
--size: 128px;
--track-width: 4px;
--track-color: var(--sl-color-neutral-200);
--indicator-color: var(--sl-color-primary-600);
--indicator-color: var(--sl-color-primary-700);
display: inline-flex;
}

12
src/components/radio/radio.styles.ts
Wyświetl plik

@ -71,20 +71,20 @@ export default css`
/* Checked */
.radio--checked .radio__control {
color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
background-color: var(--sl-color-primary-700);
}
/* Checked + hover */
.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
}
/* Checked + focus */
.radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}

32
src/components/range/range.styles.ts
Wyświetl plik

@ -44,8 +44,8 @@ export default css`
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-600);
border: solid var(--sl-input-border-width) var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
border: solid var(--sl-input-border-width) var(--sl-color-primary-700);
-webkit-appearance: none;
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
@ -54,19 +54,19 @@ export default css`
}
.range__control:enabled::-webkit-slider-thumb:hover {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
}
.range__control:enabled${focusVisibleSelector}::-webkit-slider-thumb {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}
.range__control:enabled::-webkit-slider-thumb:active {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
cursor: grabbing;
}
@ -94,27 +94,27 @@ export default css`
height: var(--thumb-size);
width: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-700);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
cursor: pointer;
}
.range__control:enabled::-moz-range-thumb:hover {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
}
.range__control:enabled${focusVisibleSelector}::-moz-range-thumb {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
box-shadow: var(--sl-focus-ring);
}
.range__control:enabled::-moz-range-thumb:active {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
cursor: grabbing;
}

2
src/components/spinner/spinner.styles.ts
Wyświetl plik

@ -7,7 +7,7 @@ export default css`
:host {
--track-width: 2px;
--track-color: rgb(128 128 128 / 25%);
--indicator-color: var(--sl-color-primary-600);
--indicator-color: var(--sl-color-primary-700);
--speed: 2s;
display: inline-flex;

20
src/components/switch/switch.styles.ts
Wyświetl plik

@ -79,37 +79,37 @@ export default css`
~ .switch__control
.switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
box-shadow: var(--sl-focus-ring);
}
/* Checked */
.switch--checked .switch__control {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-700);
}
.switch--checked .switch__control .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
transform: translateX(calc((var(--width) - var(--height)) / 2));
}
/* Checked + hover */
.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-700);
}
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
}
/* Checked + focus */
.switch.switch--checked:not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-700);
border-color: var(--sl-color-primary-700);
}
.switch.switch--checked:not(.switch--disabled)
@ -117,7 +117,7 @@ export default css`
~ .switch__control
.switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-700);
box-shadow: var(--sl-focus-ring);
}

2
src/components/tab-group/tab-group.styles.ts
Wyświetl plik

@ -6,7 +6,7 @@ export default css`
:host {
--track-color: var(--sl-color-neutral-200);
--indicator-color: var(--sl-color-primary-600);
--indicator-color: var(--sl-color-primary-700);
display: block;
}

10
src/components/tab/tab.styles.ts
Wyświetl plik

@ -25,7 +25,7 @@ export default css`
}
.tab:hover:not(.tab--disabled) {
color: var(--sl-color-primary-600);
color: var(--sl-color-primary-700);
}
.tab:focus {
@ -37,15 +37,15 @@ export default css`
box-shadow: inset var(--sl-focus-ring);
}
.tab.tab--active:not(.tab--disabled) {
color: var(--sl-color-primary-600);
.tab--active:not(.tab--disabled) {
color: var(--sl-color-primary-700);
}
.tab.tab--closable {
.tab--closable {
padding-right: var(--sl-spacing-small);
}
.tab.tab--disabled {
.tab--disabled {
opacity: 0.5;
cursor: not-allowed;
}

2
src/themes/dark.css
Wyświetl plik

@ -407,7 +407,7 @@
/* Focus ring */
--sl-focus-ring-alpha: 45%;
--sl-focus-ring-width: 3px;
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 88.7% 48.4% / var(--sl-focus-ring-alpha));
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 93.1% 60% / var(--sl-focus-ring-alpha));
/* Buttons */
--sl-button-font-size-small: var(--sl-font-size-x-small);

2
src/themes/light.css
Wyświetl plik

@ -407,7 +407,7 @@
/* Focus rings */
--sl-focus-ring-alpha: 40%;
--sl-focus-ring-width: 3px;
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 88.7% 48.4% / var(--sl-focus-ring-alpha));
--sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(201.2 91.3% 40.8% / var(--sl-focus-ring-alpha));
/* Buttons */
--sl-button-font-size-small: var(--sl-font-size-x-small);