From fac348588a84e444069a9a62fd597dc483b36000 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 29 Dec 2023 12:30:45 +0700
Subject: [PATCH 1/2] Loader - New stare, base color transparent

---
 apps/pink/src/pages/elements/loader.mdx | 18 ++++++++++++++----
 packages/ui/src/6-elements/_loader.scss |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
index 324c4d7c27..dcc62baa92 100644
--- a/apps/pink/src/pages/elements/loader.mdx
+++ b/apps/pink/src/pages/elements/loader.mdx
@@ -17,12 +17,21 @@ description: Use loaders to indicate to users that something is in progress and
     <div class="loader is-small"></div>
 </Preview>
 
+## Remove base border color
+
+| State Class          | Type                |                                                 |
+| -------------------- | ------------------- | ----------------------------------------------- |
+| `is-transparent`     | Remove Circle color | Base color of loading change to transparent     |
+
+<Preview center>
+    <div class="loader is-transparent"></div>
+</Preview>
 
 ## Loading precent state
 Work different from the other rotate loaders.
-| State Class          | Type     |                                                 |
-| -------------------- | -------- | ----------------------------------------------- |
-| `is-loading`         | Loading  | Change behaving from rotating to loading        |
+| State Class          | Type                |                                                 |
+| -------------------- | ------------------- | ----------------------------------------------- |
+| `is-loading`         | Loading             | Change behaving from rotating to loading        |
 
 | param                         | represents                                                                       | Example:                                           |
 | ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
@@ -32,4 +41,5 @@ Work different from the other rotate loaders.
 
 <Preview center>
     <div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-100);"></div>
-</Preview>
\ No newline at end of file
+</Preview>
+
diff --git a/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss
index 4764d11e21..db9e2f01c8 100644
--- a/packages/ui/src/6-elements/_loader.scss
+++ b/packages/ui/src/6-elements/_loader.scss
@@ -42,6 +42,7 @@
       background: hsl(var(--p-loader-bg-color));
     }
   }
+  &.is-transparent { --p-loader-base-full-color:var(--transparent)!important; }
 
   &.is-small {
     --p-loader-size:        var(--loader-size, #{pxToRem(16)});

From dd56ba8fc66b515f74d58a6ad3944e2410f484ad Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Fri, 29 Dec 2023 12:34:37 +0700
Subject: [PATCH 2/2] Loader - Inline loader, update with new transparent state

---
 apps/pink/src/pages/components/inline-loader.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/pink/src/pages/components/inline-loader.mdx b/apps/pink/src/pages/components/inline-loader.mdx
index d45b6542d7..eb607c4681 100644
--- a/apps/pink/src/pages/components/inline-loader.mdx
+++ b/apps/pink/src/pages/components/inline-loader.mdx
@@ -30,7 +30,7 @@ title: Inline loader
 <Preview center>
     <only-preview>
         <div class="box u-flex u-cross-center u-gap-16" style="--box-border-radius:var(--border-radius-xsmall); --p-box-padding:1rem 1.5rem;">
-            <div class="loader is-small"></div>
+            <div class="loader is-small is-transparent"></div>
             <span class="u-trim u-stretch">Provide contextual message</span>
             <button class="button is-secondary">
                 <span class="text">Button</span>