fix: a11y fix on text contrast

both introduced a new shade of the gray color - next fit to the 50, that is even already higher than 4.5, which is the minimum for AA a11y definition

Author: mfranzke

packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -14,6 +14,7 @@ $pl-color-gray-07: #eee;
 $pl-color-gray-13: #ddd;
 $pl-color-gray-20: #ccc;
 $pl-color-gray-50: #808080;
+$pl-color-gray-55: #737373;
 $pl-color-gray-70: #4d4c4c;
 $pl-color-gray-87: #222;
 $pl-color-black: #000;

packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss

@@ -24,7 +24,7 @@
   padding: 0.5rem 0 0;
   line-height: 1.3;
   font-size: 90%;
-  color: $pl-color-gray-50;
+  color: $pl-color-gray-55;
 
   &:empty {
     padding: 0;
@@ -52,7 +52,7 @@
   display: inline-flex; /* 1 */
   align-items: center; /* 1 */
   padding: $pl-pad 0 0.3rem;
-  color: $pl-color-gray-50 !important;
+  color: $pl-color-gray-55 !important;
   text-decoration: none;
   cursor: pointer;
 
@@ -73,7 +73,7 @@
   right: 0;
   z-index: 1;
   padding: 0.4rem 0.5rem;
-  color: $pl-color-gray-50;
+  color: $pl-color-gray-55;
   background-color: transparent;
   cursor: pointer;
   font-weight: normal;

packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss

@@ -42,7 +42,7 @@
   padding: 0.2rem 0.4rem;
   border: 1px solid transparent;
   border-radius: $pl-border-radius-med;
-  color: $pl-color-gray-50;
+  color: $pl-color-gray-55;
   background-color: $pl-color-white;
   cursor: pointer;
   text-decoration: none;

packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss

@@ -23,7 +23,7 @@
 	 * Link within the text passage
 	 */
   a {
-    color: $pl-color-gray-50;
+    color: $pl-color-gray-55;
     text-decoration: underline;
     transition: opacity $pl-animate-quick ease;