feat(PPDSC-2151): Add Outline Style Presets

site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap

@@ -1077,18 +1077,6 @@ exports[`ComponentAPI renders with props for multiple components 1`] = `
   }
 }
 
-.emotion-40:focus {
-  outline-offset: -1px;
-}
-
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-40:focus {
-      outline-offset: -5px;
-    }
-  }
-}
-
 .emotion-41 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1208,18 +1196,6 @@ exports[`ComponentAPI renders with props for multiple components 1`] = `
   }
 }
 
-.emotion-46:focus {
-  outline-offset: -1px;
-}
-
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-46:focus {
-      outline-offset: -5px;
-    }
-  }
-}
-
 .emotion-50 {
   background-color: #577FFB;
   position: absolute;
@@ -1244,14 +1220,17 @@ exports[`ComponentAPI renders with props for multiple components 1`] = `
   width: 100%;
 }
 
-.emotion-52:focus {
-  outline-offset: -1px;
+.emotion-52:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: -3px;
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-52:focus {
-      outline-offset: -5px;
+    .emotion-52:focus:not(:disabled) {
+      outline-style: auto;
     }
   }
 }

site/components/illustrations/theme/style-presets/checked-focus-visible-hover.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import {getSSRId} from 'newskit';
+import {Svg} from '../../svg';
+import {Path} from '../../path';
+import {Rect} from '../../rect';
+
+export const CheckedFocusVisibleHover: React.FC = () => {
+  const filter0 = getSSRId();
+  const filter1 = getSSRId();
+
+  return (
+    <Svg
+      width="1000"
+      height="1000"
+      viewBox="0 0 1000 1000"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Rect
+        width="1000"
+        height="1000"
+        rx="22"
+        fill="illustrationBackground020"
+      />
+      <Path
+        d="M94 248.656C94 163.052 163.396 93.6562 249 93.6562H751C836.604 93.6562 906 163.052 906 248.656V750.656C906 836.26 836.604 905.656 751 905.656H249C163.396 905.656 94 836.26 94 750.656V248.656Z"
+        fill="interactiveInput030"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M704.186 240.656H295C265.177 240.656 241 264.833 241 294.656V703.842C241 733.665 265.177 757.842 295 757.842H704.186C734.009 757.842 758.186 733.665 758.186 703.842V294.656C758.186 264.833 734.009 240.656 704.186 240.656ZM295 214.656C250.817 214.656 215 250.473 215 294.656V703.842C215 748.025 250.817 783.842 295 783.842H704.186C748.368 783.842 784.186 748.025 784.186 703.842V294.656C784.186 250.473 748.368 214.656 704.186 214.656H295Z"
+        fill="interactiveInput050"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M263.629 837.182L266.734 821.486C273.923 822.908 281.366 823.656 289 823.656H315.312V839.656H289C280.318 839.656 271.835 838.805 263.629 837.182ZM683.688 839.656V823.656H710C717.634 823.656 725.077 822.908 732.266 821.486L735.371 837.182C727.165 838.805 718.682 839.656 710 839.656H683.688ZM782.23 817.76L773.329 804.464C785.768 796.137 796.48 785.424 804.808 772.985L818.104 781.886C808.612 796.063 796.407 808.269 782.23 817.76ZM840 314.969H824V288.656C824 281.022 823.252 273.579 821.83 266.39L837.526 263.285C839.149 271.491 840 279.974 840 288.656V314.969ZM818.104 216.426L804.808 225.327C796.48 212.889 785.768 202.176 773.329 193.848L782.23 180.553C796.407 190.044 808.612 202.25 818.104 216.426ZM315.312 158.656H289C280.318 158.656 271.835 159.507 263.629 161.131L266.734 176.826C273.923 175.404 281.366 174.656 289 174.656H315.312V158.656ZM216.77 180.553L225.671 193.848C213.232 202.176 202.52 212.889 194.192 225.327L180.896 216.426C190.388 202.25 202.593 190.044 216.77 180.553ZM159 683.344H175V709.656C175 717.29 175.748 724.734 177.17 731.922L161.474 735.027C159.851 726.822 159 718.338 159 709.656V683.344ZM180.896 781.886L194.192 772.985C202.52 785.424 213.232 796.137 225.671 804.464L216.77 817.76C202.593 808.269 190.388 796.063 180.896 781.886ZM159 630.719H175V578.094H159V630.719ZM159 525.469H175V472.844H159V525.469ZM159 420.219H175V367.594H159V420.219ZM159 314.969H175V288.656C175 281.022 175.748 273.579 177.17 266.39L161.474 263.285C159.851 271.491 159 279.974 159 288.656V314.969ZM367.938 158.656V174.656H420.562V158.656H367.938ZM473.188 158.656V174.656H525.812V158.656H473.188ZM578.438 158.656V174.656H631.063V158.656H578.438ZM683.688 158.656V174.656H710C717.634 174.656 725.077 175.404 732.266 176.826L735.371 161.131C727.165 159.507 718.682 158.656 710 158.656H683.688ZM840 367.594H824V420.219H840V367.594ZM840 472.844H824V525.469H840V472.844ZM840 578.094H824V630.719H840V578.094ZM840 683.344H824V709.656C824 717.29 823.252 724.734 821.83 731.922L837.526 735.027C839.149 726.822 840 718.338 840 709.656V683.344ZM631.063 839.656V823.656H578.438V839.656H631.063ZM525.812 839.656V823.656H473.188V839.656H525.812ZM420.562 839.656V823.656H367.938V839.656H420.562Z"
+        fill="illustrationPalette070"
+      />
+      <g filter={`url(#${filter0})`}>
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M331.492 748.833L315.429 724.289C304.46 707.531 281.097 701.417 263.226 710.604L267.39 708.463C262.955 710.743 260.829 716.427 262.655 721.152L284.89 778.68C288.415 787.8 297.418 800.698 304.878 807.177C304.878 807.177 349.61 844.201 349.61 858.083V875.656H422.082H441.9H458.318H476.436V858.083C476.436 844.201 503.773 800.48 503.773 800.48C508.806 791.982 513 777.01 513 767.07V693.969C512.672 677.784 498.915 664.668 481.939 664.668C473.447 664.668 466.568 671.226 466.568 679.323V685.178C466.568 668.993 452.81 655.877 435.834 655.877C427.342 655.877 420.463 662.435 420.463 670.532V676.387C420.463 660.202 406.706 647.086 389.73 647.086C381.237 647.086 374.359 653.644 374.359 661.74V667.595C374.359 664.994 374.081 662.927 373.543 661.288L368.855 585.796C368.221 575.587 359.617 567.656 349.61 567.656C339.534 567.656 331.492 575.766 331.492 585.77V658.244V748.833Z"
+          fill="white"
+        />
+      </g>
+      <g filter={`url(#${filter1})`}>
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M267.31 708.703C281.719 703.431 298.571 707.082 309.612 717.508C311.744 719.522 313.66 721.789 315.3 724.293L331.392 748.873V585.57C331.392 575.551 339.448 567.429 349.542 567.429C359.566 567.429 368.185 575.372 368.82 585.596L373.517 661.199C373.565 661.347 373.612 661.498 373.656 661.652C374.103 663.217 374.334 665.145 374.334 667.516V661.652C374.334 661.483 374.337 661.315 374.343 661.148C374.345 661.074 374.348 661 374.352 660.926C374.749 653.155 381.48 646.976 389.732 646.976C391.346 646.976 392.93 647.094 394.477 647.322C398.123 647.859 401.557 649.006 404.662 650.65C412.401 654.747 418.092 661.93 419.905 670.456C420.308 672.351 420.52 674.312 420.52 676.32V670.456C420.52 662.348 427.411 655.78 435.918 655.78C436.602 655.78 437.281 655.801 437.953 655.843C442.61 656.132 446.984 657.408 450.848 659.454C458.587 663.551 464.278 670.734 466.091 679.26C466.494 681.155 466.706 683.116 466.706 685.124V679.26C466.706 671.152 473.597 664.584 482.104 664.584C482.788 664.584 483.467 664.605 484.139 664.647C500.196 665.645 512.905 678.371 513.22 693.928V767.137C513.22 777.091 509.018 792.085 503.977 800.596C503.977 800.596 476.592 844.382 476.592 858.284V875.883H349.542V858.284C349.542 844.382 304.731 807.303 304.731 807.303C297.257 800.814 288.238 787.897 284.707 778.764L262.432 721.151C261.211 717.993 261.754 714.406 263.572 711.691C264.192 710.765 264.961 709.94 265.859 709.268C266.339 709.07 266.823 708.881 267.31 708.703ZM263.005 710.588C263.942 710.106 264.894 709.666 265.859 709.268C266.271 708.959 266.711 708.683 267.176 708.444L263.005 710.588ZM257.303 689.244C274.28 682.144 293.576 683.28 309.612 691.262V585.57C309.612 563.577 327.368 545.656 349.542 545.656C370.993 545.656 389.205 562.467 390.558 584.246L393.109 625.309C404.053 625.998 414.317 630.01 422.608 636.444C426.801 634.861 431.306 634.007 435.918 634.007C448.12 634.007 459.655 638.156 468.794 645.248C472.987 643.665 477.492 642.811 482.104 642.811C510.254 642.811 534.413 664.728 534.996 693.487L535 693.708V767.137C535 774.726 533.477 783.018 531.477 790.228C529.472 797.451 526.522 805.268 522.718 811.69L522.584 811.916L522.446 812.136L522.444 812.139L522.392 812.223C522.359 812.276 522.312 812.353 522.25 812.452L522.191 812.547C522.01 812.841 521.736 813.285 521.383 813.862C520.676 815.018 519.655 816.702 518.425 818.772C515.956 822.93 512.691 828.566 509.452 834.566C506.176 840.635 503.112 846.736 500.926 851.897C498.865 856.761 498.464 858.807 498.388 858.795C498.377 858.794 498.373 858.746 498.372 858.655V897.656H327.762V861.234C327.244 860.401 326.453 859.249 325.31 857.772C321.99 853.479 317.188 848.335 311.869 843.109C306.646 837.977 301.363 833.193 297.349 829.664C295.353 827.909 293.697 826.488 292.552 825.515C291.979 825.028 291.536 824.656 291.244 824.411C291.098 824.289 290.99 824.198 290.922 824.142L290.851 824.083L290.843 824.076L290.841 824.074L290.839 824.073L290.644 823.911L290.449 823.742C280.265 814.899 269.19 799.023 264.392 786.614L242.117 729C236.919 715.556 241.548 699.95 253.208 691.537L253.047 691.223C253.055 691.219 253.064 691.215 253.072 691.21L257.2 689.089C257.206 689.086 257.212 689.083 257.218 689.08L257.303 689.244ZM328.5 862.586C328.495 862.585 328.456 862.506 328.399 862.355C328.476 862.513 328.505 862.588 328.5 862.586Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <filter
+          id={filter0}
+          x="228.845"
+          y="545.553"
+          width="317.311"
+          height="374.311"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="11.0518" />
+          <feGaussianBlur stdDeviation="16.5776" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1616_57173"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1616_57173"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id={filter1}
+          x="206.845"
+          y="523.553"
+          width="361.311"
+          height="418.311"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="11.0518" />
+          <feGaussianBlur stdDeviation="16.5776" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1616_57173"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1616_57173"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </Svg>
+  );
+};
+
+export default CheckedFocusVisibleHover;