Merge pull request #669 from framer/fix-selection-colors

Fix selection colors

Author: madebyisaacr

plugins/ashby/src/App.css

@@ -17,6 +17,11 @@ main {
     --framer-color-tint-dimmed: rgba(73, 63, 172, 0.12);
 }
 
+[data-framer-theme="dark"] *::selection {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+}
+
 form {
     display: flex;
     flex-direction: column;

plugins/global-search/src/styles.css

@@ -72,3 +72,8 @@
     mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAApNJREFUSA2tlUtLlFEYgEe7mtFFQ8NLFBG1SJAwahtiLVy5ceVSEPQH1LZf0Lp9FO1bdYNyI7gyBFcS2kAzilYq3sfxeYZ55Zv6FGfohWfOd97vnPd23u9MXeZoaeb1Q7gPHXAFzsAS5GACxiEPqVKXqs1kmtAPQi+cAtedToz1PJ8ExxPwDl7CAlRImoN7rBiF86ABHTiGAzMIh8n3O+ifwWc4EL0n5TGTYQijvjNSxbUadozInUeGZ3nuh1WYgpIkM+hGMwYajAgdrfUn+AaLoLTCAxiAOxCZxL4RdB+gZMjxEjwHo4hS8Jh5DR9hz0mKaNizegoNEI7Wee6FXJTISG6AUgDr+QImoAiHie+mwZJow/PRps4uwnsnRj8Epqc4voVJJ8eULOtW4BFYYjPpgjc+3IWI2sh/wFeoVl6xYQ48dDGLfjOwc/ygQqz595hUMVouS9QHBm4l6k3HWpnBLqicgVrlCxujSbR1Swd+UDpQYRS/oVaZZ2MWwlZBB9Zdxf+QTYw8SRgq6sAvz7vH6JULEB9USVHFjzZskgPRQR4ayxoXXIdaHdg9HrB2rErByWxZERnYtrWUzD0esDbtTmXPhzXwHrKLxEUbYGbVyDkWWwkdadfqbPmwDXZSCyh2VAf8BM/nOOJH5Y0QopMt2I5U/KO4DZZJB47XwEX+ex0mGroMV8sLwp56gyuGwiyW4SZ4c8bt2cZzO7jBNeqtsRHbeZ1g9krsMbhfYPv/c5gecA+4yAVuitFszE5Hjva872OMdXagF19JIoOYWyozMTI3J0tmA6gLvXPfO1cc/XOqOLe/HbjwD8yCXRD3VNJROEgatiRZMJsKsbZHia3nAdphtq8fkiWyXJbBe8uM1aXKPouNnz2Bm1kwAAAAAElFTkSuQmCC");
     mask-size: 12px;
 }
+
+*::selection {
+    background-color: var(--framer-color-tint-dimmed, rgba(0, 153, 255, 0.1));
+    color: var(--framer-color-tint, #09f);
+}

plugins/google-sheets/src/globals.css

@@ -6,6 +6,7 @@ main {
     --framer-color-tint: #00c43e;
     --framer-color-tint-dark: #00b539;
     --framer-color-tint-extra-dark: #00ab36;
+    --framer-color-tint-dimmed: rgba(0, 196, 62, 0.1);
 }
 
 select:not(:disabled) {

plugins/greenhouse/src/App.css

@@ -10,6 +10,11 @@ main {
 
     user-select: none;
     -webkit-user-select: none;
+
+    --framer-color-tint: #23a47f;
+    --framer-color-tint-dark: #23a47f;
+    --framer-color-tint-extra-dark: #23a47f;
+    --framer-color-tint-dimmed: rgba(35, 164, 127, 0.12);
 }
 
 form {
@@ -138,11 +143,6 @@ form {
     background-color: var(--framer-color-bg-tertiary) !important;
 }
 
-.mapping .source-field:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 1px #15372c;
-}
-
 .mapping .source-field.missing-reference,
 .mapping .source-field.missing-reference input[type="checkbox"] {
     cursor: not-allowed;
@@ -195,10 +195,6 @@ form {
     pointer-events: none;
 }
 
-input[type="checkbox"]:checked {
-    background-color: #15372c;
-}
-
 .setup,
 .mapping {
     width: 100%;

plugins/notion/src/App.css

@@ -3,13 +3,15 @@
 [data-framer-theme="light"] #root {
     --framer-color-tint: #000;
     --framer-color-tint-dark: #262626;
+    --framer-color-tint-dimmed: rgba(0, 0, 0, 0.15);
     --framer-color-tint-extra-dark: #333333;
 }
 
 [data-framer-theme="dark"] #root {
     --framer-color-tint: #fff;
     --framer-color-tint-dark: #e3e3e3;
     --framer-color-tint-extra-dark: #c3c3c3;
+    --framer-color-tint-dimmed: rgba(255, 255, 255, 0.2);
     --framer-color-text-reversed: #000;
 }
 

plugins/prco/src/App.css

@@ -13,6 +13,12 @@ main {
     --framer-color-tint: #0f7639;
     --framer-color-tint-dark: #0f7639;
     --framer-color-tint-extra-dark: #0f7639;
+    --framer-color-tint-dimmed: rgba(15, 118, 57, 0.1);
+}
+
+[data-framer-theme="dark"] *::selection {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
 }
 
 form {

plugins/recruitee/src/App.css

@@ -13,6 +13,12 @@ main {
     --framer-color-tint: #493fac;
     --framer-color-tint-dark: #493fac;
     --framer-color-tint-extra-dark: #493fac;
+    --framer-color-tint-dimmed: rgba(73, 63, 172, 0.15);
+}
+
+[data-framer-theme="dark"] *::selection {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
 }
 
 form {