feat: add design tokens support (openedx#1758)

Author: dcoa

src/library-authoring/components/BaseCard.scss

@@ -8,11 +8,21 @@
     }
 
     &.selected:not(:focus) {
-      outline: 2px var(--pgn-color-gray-700) solid;
+      border: 2px var(--pgn-color-gray-700) solid;
+
+      .library-item-header {
+        border-top-left-radius: calc(.375rem - 2px);
+        border-top-right-radius: calc(.375rem - 2px);
+      }
     }
 
     &.selected:focus {
-      outline: 3px var(--pgn-color-gray-700) solid;
+      border: 3px var(--pgn-color-gray-700) solid;
+
+      .library-item-header {
+        border-top-left-radius: calc(.375rem - 3px);
+        border-top-right-radius: calc(.375rem - 3px);
+      }
     }
 
     &:not(.selected):focus {

src/library-authoring/units/index.scss

@@ -31,19 +31,7 @@
     &:focus {
       // this is required for clicks to be passed to underlying iframe component
       pointer-events: none;
-    }
-
-    &.selected:not(:focus) {
-      outline: 2px var(--pgn-color-gray-700) solid;
-    }
-
-    &.selected:focus {
-      outline: 3px var(--pgn-color-gray-700) solid;
-    }
-
-    &:not(.selected):focus {
-      outline: 1px var(--pgn-color-gray-200) solid;
-      outline-offset: 2px;
+      outline: solid 1px var(--pgn-color-dark-500);
     }
 
     &::before {