use rgb primitives for color tokens to support alpha

shoelace-style · Aug 5, 2021 · ad35df2 · ad35df2
1 parent fd104ad
commit ad35df2
Show file tree

Hide file tree

Showing 53 changed files with 1,204 additions and 1,209 deletions.
diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
@@ -1,21 +1,21 @@
 .code-block {
   position: relative;
   border-radius: 3px;
-  background-color: var(--sl-color-gray-50);
+  background-color: rgb(var(--sl-color-gray-50));
   margin-bottom: 1.5rem;
 }
 
 .sl-theme-dark .code-block {
-  background-color: var(--sl-color-gray-200);
+  background-color: rgb(var(--sl-color-gray-200));
 }
 
 .code-block__preview {
   position: relative;
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: var(--sl-color-white);
+  background-color: rgb(var(--sl-color-white));
   min-width: 20rem;
   max-width: 100%;
   padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -43,19 +43,20 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: var(--sl-color-gray-500);
-  background-color: var(--sl-color-white);
-  border-left: solid 1px var(--sl-color-gray-200);
+  color: rgb(var(--sl-color-gray-500));
+  background-color: rgb(var(--sl-color-white));
+  border-left: solid 1px rgb(var(--sl-color-gray-200));
   border-top-right-radius: 3px;
   cursor: ew-resize;
   transition: 250ms background-color;
 }
 
 .code-block__resizer:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
+  box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
+    0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
+  background-color: rgb(var(--sl-color-primary-50));
+  color: rgb(var(--sl-color-primary-500));
   z-index: 2;
 }
 
@@ -70,7 +71,7 @@
 }
 
 .code-block__source {
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom: none;
   border-radius: 0 !important;
   margin: 0;
@@ -93,30 +94,30 @@
   justify-content: center;
   width: 100%;
   height: 2.5rem;
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  background: var(--sl-color-white);
+  background: rgb(var(--sl-color-white));
   font: inherit;
   font-size: 0.875rem;
-  color: var(--sl-color-gray-600);
+  color: rgb(var(--sl-color-gray-600));
   cursor: pointer;
   transition: 250ms background-color;
   -webkit-appearance: none;
 }
 
 .code-block__toggle:hover,
 .code-block__toggle:active {
-  border-color: var(--sl-color-primary-400);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
+  border-color: rgb(var(--sl-color-primary-400));
+  background-color: rgb(var(--sl-color-primary-50));
+  color: rgb(var(--sl-color-primary-500));
 }
 
 .code-block__toggle:focus {
   outline: none;
-  border-color: var(--sl-color-primary-400);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
+  border-color: rgb(var(--sl-color-primary-400));
+  background-color: rgb(var(--sl-color-primary-50));
+  color: rgb(var(--sl-color-primary-500));
   box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
 }