refactor: change the color class and custom properties name

HamzaAmar · Sep 26, 2024 · cd4f6d1 · cd4f6d1
1 parent 33e1793
commit cd4f6d1
Show file tree

Hide file tree

Showing 181 changed files with 1,829 additions and 1,806 deletions.
diff --git a/README.md b/README.md
@@ -58,8 +58,8 @@ function MyComponent() {
         label="password"
         hint="password must be between 6 to 30 character"
       />
-      <Checkbox color="pri" onChange={handleToggle} label="I agree to the terms and conditions" />
-      <Button icon={<Icons.Send name="heart" size={24} color="dan" />}>Register</Button>
+      <Checkbox color="p" onChange={handleToggle} label="I agree to the terms and conditions" />
+      <Button icon={<Icons.Send name="heart" size={24} color="d" />}>Register</Button>
     </form>
   )
 }

diff --git a/apps/docs/content/getting-started/cra.mdx b/apps/docs/content/getting-started/cra.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 

diff --git a/apps/docs/content/getting-started/next.mdx b/apps/docs/content/getting-started/next.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 

diff --git a/apps/docs/content/getting-started/remix.mdx b/apps/docs/content/getting-started/remix.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 

diff --git a/apps/docs/content/getting-started/vite.mdx b/apps/docs/content/getting-started/vite.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 

diff --git a/apps/docs/content/themes/color.mdx b/apps/docs/content/themes/color.mdx
@@ -19,37 +19,37 @@ The Pillar UI color theme provides a set of default colors that can be easily ap
       </TableRow>
       <TableRow>
         <TableColumn>Primary Colors</TableColumn>
-        <TableColumn>`--pri-*`</TableColumn>
+        <TableColumn>`--P*`</TableColumn>
         <TableColumn>Highlight important elements; range from light to dark.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Secondary Colors</TableColumn>
-        <TableColumn>`--sec-*`</TableColumn>
+        <TableColumn>`--Se*`</TableColumn>
         <TableColumn>Complement primary colors; offer visual variation.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Danger Colors</TableColumn>
-        <TableColumn>`--dan-*`</TableColumn>
+        <TableColumn>`--D*`</TableColumn>
         <TableColumn>Signal critical or error-related elements in your UI.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Warning Colors</TableColumn>
-        <TableColumn>`--war-*`</TableColumn>
+        <TableColumn>`--W*`</TableColumn>
         <TableColumn>Convey cautionary information or warnings.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Success Colors</TableColumn>
-        <TableColumn>`--suc-*`</TableColumn>
+        <TableColumn>`--S*`</TableColumn>
         <TableColumn>Represent successful or positive elements in your UI.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Opacity Colors</TableColumn>
-        <TableColumn>`--opa-*`</TableColumn>
+        <TableColumn>`--O*`</TableColumn>
         <TableColumn>Provide varying transparency levels to UI elements.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>bg Colors</TableColumn>
-        <TableColumn>`--bg-*`</TableColumn>
+        <TableColumn>`--B*`</TableColumn>
         <TableColumn>Serve as background colors for bgs or containers.</TableColumn>
       </TableRow>
     </Table>

diff --git a/apps/docs/content/themes/font.mdx b/apps/docs/content/themes/font.mdx
@@ -12,7 +12,7 @@ publishedAt: '2024-05-03T05:35:07.322Z'
 The font size variables, defined within the `:root` CSS selector, ensure accessibility throughout your CSS stylesheets.
 
 <Alert
-  color="war"
+  color="w"
   title="Caution"
   variant="soft"
   message="Customizing spacing using the `--s-*` variables may impact the responsive layout. Default values utilize the `clamp` function to adapt spacing based on viewport size, maintaining proportions and alignment. Modifying these values might result in spacing inconsistencies."

diff --git a/apps/docs/content/themes/gradient.mdx b/apps/docs/content/themes/gradient.mdx
@@ -13,31 +13,31 @@ Enhance your project's visual appeal with customizable CSS gradient variables in
 
 ## Usage Gradient Variables
 
-These gradient variables are available for usage when applying themes to your CSS. Some of our components utilize these variables to support gradients under the hood, so you don't need to worry about them. However, if you want to use gradients in your custom components, you can reference these variables using the following names, for example: `var(--suc-gradient)`.
+These gradient variables are available for usage when applying themes to your CSS. Some of our components utilize these variables to support gradients under the hood, so you don't need to worry about them. However, if you want to use gradients in your custom components, you can reference these variables using the following names, for example: `var(--Sgradient)`.
 
 <Table>
   <TableRow type="head">
     <TableColumn as="th">Variable</TableColumn>
     <TableColumn as="th">Description</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--suc-gradient`</TableColumn>
+    <TableColumn>`--Sgradient`</TableColumn>
     <TableColumn>Gradient variable for success-related elements.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--sec-gradient`</TableColumn>
+    <TableColumn>`--Segradient`</TableColumn>
     <TableColumn>Gradient variable for secondary elements.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--dan-gradient`</TableColumn>
+    <TableColumn>`--Dgradient`</TableColumn>
     <TableColumn>Gradient variable for elements associated with danger or errors.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--war-gradient`</TableColumn>
+    <TableColumn>`--Wgradient`</TableColumn>
     <TableColumn>Gradient variable for warning-related elements.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--bg-gradient`</TableColumn>
+    <TableColumn>`--Bgradient`</TableColumn>
     <TableColumn>Gradient variable for bg elements.</TableColumn>
   </TableRow>
   <TableRow>
@@ -62,11 +62,11 @@ These gradient variables are available for usage when applying themes to your CS
 
 The gradient variables define different gradients for various color combinations. Each variable represents a specific gradient style:
 
-- **--suc-gradient**: Gradient variable for success-related elements.
-- **--sec-gradient**: Gradient variable for secondary elements.
-- **--dan-gradient**: Gradient variable for elements associated with danger or errors.
-- **--war-gradient**: Gradient variable for warning-related elements.
-- **--bg-gradient**: Gradient variable for bg elements.
+- **--Sgradient**: Gradient variable for success-related elements.
+- **--Segradient**: Gradient variable for secondary elements.
+- **--Dgradient**: Gradient variable for elements associated with danger or errors.
+- **--Wgradient**: Gradient variable for warning-related elements.
+- **--Bgradient**: Gradient variable for bg elements.
 - **--mixed1-gradient**: Customizable gradient variable for mixed color combination 1.
 - **--mixed2-gradient**: Customizable gradient variable for mixed color combination 2.
 - **--mixed3-gradient**: Customizable gradient variable for mixed color combination 3.
@@ -76,15 +76,15 @@ The gradient variables define different gradients for various color combinations
 
 If you'd like to customize the gradient styles beyond the default values, you have the flexibility to do so. Simply override the existing gradient variables with your preferred gradient styles.
 
-For instance, if you want to modify the gradient colors for the `--suc-gradient`, you can achieve this by assigning a new `linear-gradient` value to the `--suc-gradient-custom` variable:
+For instance, if you want to modify the gradient colors for the `--Sgradient`, you can achieve this by assigning a new `linear-gradient` value to the `--Sgradient-custom` variable:
 
 ```css showLineNumbers title="themes.css"
 :root {
-  --suc-gradient-custom: linear-gradient(to right, #00ff00, #ff0000);
+  --Sgradient-custom: linear-gradient(to right, #00ff00, #ff0000);
 }
 ```
 
-In this example, we're customizing the --pri-gradient-custom and --sec-gradient-custom properties to define our own gradient styles for primary and secondary elements, respectively.
+In this example, we're customizing the --Pgradient-custom and --Segradient-custom properties to define our own gradient styles for primary and secondary elements, respectively.
 
 By updating these gradient variables, you can create unique gradient styles for different components and elements in your project.
 

diff --git a/apps/docs/src/app/_components/_icon.scss b/apps/docs/src/app/_components/_icon.scss
@@ -1,4 +1,4 @@
 .icons-scroll {
   overflow-x: auto;
-  border: 1px solid var(--bg-4);
+  border: 1px solid var(--B4);
 }
diff --git a/apps/docs/src/app/_components/aside/_aside.scss b/apps/docs/src/app/_components/aside/_aside.scss
@@ -5,12 +5,12 @@
   top: 4rem;
   overflow-y: auto;
   max-height: calc(100vh - 4rem);
-  background: var(--bg-1);
+  background: var(--B1);
   z-index: 50;
 }
 
 .toc-wrapper {
-  border-inline-start: 1px solid var(--bg-4);
+  border-inline-start: 1px solid var(--B4);
 }
 
 .as-icon {
@@ -46,8 +46,8 @@
   border-inline-start: 3px solid transparent;
 
   &[data-active='true'] {
-    background: var(--pri-3);
-    border-color: var(--pri-9);
+    background: var(--P3);
+    border-color: var(--P9);
   }
 }
 
@@ -57,7 +57,7 @@
   justify-content: space-between;
   width: 100%;
   font-size: var(--f-xs);
-  color: var(--bg-11);
+  color: var(--B11);
   outline: none;
 }
 

diff --git a/apps/docs/src/app/_components/code/_index.scss b/apps/docs/src/app/_components/code/_index.scss
@@ -1,18 +1,18 @@
 .prose {
   --sha-rad: 0.5rem;
 
-  --sh-class: var(--pri-11);
-  --sh-identifier: var(--suc-11);
-  --sh-sign: var(--bg-11);
-  --sh-property: var(--sec-11);
-  --sh-entity: var(--war-11);
-  --sh-jsxliterals: var(--bg-12);
-  --sh-string: var(--suc-10);
-  --sh-keyword: var(--dan-11);
-  --sh-comment: var(--bg-9);
+  --sh-class: var(--P11);
+  --sh-identifier: var(--S11);
+  --sh-sign: var(--B11);
+  --sh-property: var(--Se11);
+  --sh-entity: var(--W11);
+  --sh-jsxliterals: var(--B12);
+  --sh-string: var(--S10);
+  --sh-keyword: var(--D11);
+  --sh-comment: var(--B9);
 
   & li::marker {
-    color: var(--bg-11);
+    color: var(--B11);
     font-size: 0.85rem;
   }
 
@@ -34,9 +34,9 @@
 }
 
 .code--section {
-  background-color: var(--bg-3);
+  background-color: var(--B3);
   border-radius: var(--sha-rad);
-  border: 1px solid var(--bg-6);
+  border: 1px solid var(--B6);
 
   & > * {
     padding: 0.375rem 1rem;
@@ -79,7 +79,7 @@
 }
 
 .playground {
-  border: 1px solid var(--bg-6);
+  border: 1px solid var(--B6);
   padding: 1.5rem;
   gap: 1.5rem;
   display: flex;
@@ -99,13 +99,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--opa-4);
+  border-bottom: 1px solid var(--O4);
 }
 
 .dot {
   width: 0.5rem;
   height: 0.5rem;
-  background: var(--dan-9);
+  background: var(--D9);
   border-radius: 50%;
   position: relative;
 
@@ -115,14 +115,14 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background-color: var(--war-9);
+    background-color: var(--W9);
     top: 0;
     left: 0.75rem;
     border-radius: inherit;
   }
 
   &:after {
-    background-color: var(--suc-9);
+    background-color: var(--S9);
     left: 1.5rem;
   }
 }
diff --git a/apps/docs/src/app/_components/colors/colors.tsx b/apps/docs/src/app/_components/colors/colors.tsx
@@ -18,7 +18,7 @@ function ColorItem({ item, value }: ColorItem) {
       <div className="l_f-sm">
         <Grid justify="center" grid="repeat(12, 1fr) x auto 30px 30px" gap="xs">
           {Array.from({ length: 12 }, (_, index) => (
-            <Text align="center" size="sm" key={`${item}-${index + 1}`} weight="medium" color="bg" low>
+            <Text align="center" size="sm" key={`${item}-${index + 1}`} weight="medium" color="b" low>
               {index + 1}
             </Text>
           ))}