Merge pull request #190 from appwrite/update-text-selection-style

Update text selection style
appwrite · May 14, 2024 · a913bff · a913bff
2 parents 3510c9e + 9bc2c54
commit a913bff
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/apps/pink/src/pages/foundations/colors.mdx b/apps/pink/src/pages/foundations/colors.mdx
@@ -252,51 +252,30 @@ In the Appwrite console, we use the colors below in specific components, such as
                         <div class="box" style="background-color:hsl(var(--color-blue-100));"></div>
                         <p class="u-text-center">~-~-color-blue-100</p>
                     </li>
-                </ul>
-            </div>
-
-            <div>
-                <ul class="grid-box u-margin-block-start-8" style="--grid-item-size:9rem; --p-grid-item-size-small-screens:9rem;">
                     <li>
                         <div class="box" style="background-color:hsl(var(--color-green-100));"></div>
                         <p class="u-text-center">~-~-color-green-100</p>
                     </li>
-                </ul>
-            </div>
-
-            <div>
-                <ul class="grid-box u-margin-block-start-8" style="--grid-item-size:9rem; --p-grid-item-size-small-screens:9rem;">
                     <li>
                         <div class="box" style="background-color:hsl(var(--color-orange-100));"></div>
                         <p class="u-text-center">~-~-color-orange-100</p>
                     </li>
-                </ul>
-            </div>
-
-            <div>
-                <ul class="grid-box u-margin-block-start-8" style="--grid-item-size:9rem; --p-grid-item-size-small-screens:9rem;">
                     <li>
                         <div class="box" style="background-color:hsl(var(--color-red-100));"></div>
                         <p class="u-text-center">~-~-color-red-100</p>
                     </li>
-                </ul>
-            </div>
-
-            <div>
-                <ul class="grid-box u-margin-block-start-8" style="--grid-item-size:9rem; --p-grid-item-size-small-screens:9rem;">
                     <li>
                         <div class="box" style="background-color:hsl(var(--color-purple-100));"></div>
                         <p class="u-text-center">~-~-color-purple-100</p>
                     </li>
-                </ul>
-            </div>
-
-            <div>
-                <ul class="grid-box u-margin-block-start-8" style="--grid-item-size:9rem; --p-grid-item-size-small-screens:9rem;">
                     <li>
                         <div class="box" style="background-color:hsl(var(--color-pink-100));"></div>
                         <p class="u-text-center">~-~-color-pink-100</p>
                     </li>
+                    <li>
+                        <div class="box" style="background-color:hsl(var(--color-mint-500));"></div>
+                        <p class="u-text-center">~-~-color-mint-500</p>
+                    </li>
                 </ul>
             </div>
 

diff --git a/packages/ui/src/1-css-variables/_colors.scss b/packages/ui/src/1-css-variables/_colors.scss
@@ -81,6 +81,12 @@
   --color-pink-hue: 331;
   --color-pink-100: var(--color-pink-hue) 100% 82%;               /* #FFA1CE */
 
+  /* [Newly added] mint */
+  --color-mint-hue: 177;
+  --color-mint-500: calc(var(--color-mint-hue) + 1) 54%  69%;
+  /* [Finish added] */
+
+
   /* transparent */
   --transparent: 0 0% 0% / 0;
 }

diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss
@@ -100,6 +100,11 @@ code  {
   &-2 { font-size:var(--font-size-0); }
 }
 
+::selection {
+  color: hsl(var(--color-neutral-1000)); -webkit-text-fill-color: hsl(var(--color-neutral-1000));
+  background-color: hsl(var(--color-mint-500)); background-clip:revert; -webkit-background-clip:revert;
+}
+
 :where(body) :focus-visible {
   /* focus styles */
   box-shadow: var(--focus-box-shadow);