Updated: Typography component updated.

StaticMania · Feb 20, 2024 · 116f8c6 · 116f8c6
1 parent ce72d53
commit 116f8c6
Show file tree

Hide file tree

Showing 51 changed files with 209 additions and 416 deletions.
diff --git a/.storybook/style.css b/.storybook/style.css
@@ -1056,30 +1056,6 @@ input[type='number'] {
   letter-spacing: -0.5px;
 }
 
-.description-1 {
-  font-size: 1.875rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-2 {
-  font-size: 1.75rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-3 {
-  font-size: 1.625rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.5px;
-}
-
-.description-4 {
-  font-size: 1.5rem;
-  line-height: 2.25rem;
-  letter-spacing: -0.5px;
-}
-
 .body-1 {
   font-size: 1.375rem;
   line-height: 1.875rem;

diff --git a/app/components/CodePreview.tsx b/app/components/CodePreview.tsx
@@ -23,7 +23,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
         <button
           type="button"
           onClick={() => setActive(0)}
-          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
+          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium text-metal-400 first:ml-0 ${
             active === 0 ? '!border-b-white text-white' : ''
           }`}
           id="preview-btn">
@@ -32,7 +32,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
         <button
           id="code-btn"
           onClick={() => setActive(1)}
-          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium  text-metal-400 first:ml-0 ${
+          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium  text-metal-400 first:ml-0 ${
             active === 1 ? '!border-b-metal-100 text-white' : ''
           }`}>
           Code
@@ -54,7 +54,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
                 className="flex h-8 w-8 items-center justify-center rounded-md border-2 border-metal-800 bg-metal-900 transition-all duration-300 hover:border-transparent hover:bg-metal-700 md:h-9 md:w-9"
                 onClick={() => copyToClipboard(code)}>
                 {copy ? (
-                  <span className="flex items-center text-body-6">
+                  <span className="flex items-center text-body-5">
                     <Check size={20} color="white" />
                   </span>
                 ) : (

diff --git a/app/components/DocsContentLayout.tsx b/app/components/DocsContentLayout.tsx
@@ -10,10 +10,8 @@ export const DocsContentLayout: FC<DocsContentLayoutProps> = function ({ title,
   return (
     <div>
       <div className="mb-[50px]">
-        <h1 className="mb-2 inline-block w-full text-body-1 font-semibold leading-10 tracking-[-0.5px] text-metal-900 md:text-[26px]">
-          {title}
-        </h1>
-        <p className="text-body-5 leading-6 tracking-[-0.3px] text-metal-700 md:text-body-4">{description}</p>
+        <h1 className="mb-2 inline-block w-full text-heading-6 font-semibold text-metal-900">{title}</h1>
+        <p className="text-body-3 text-metal-500">{description}</p>
       </div>
       <div id="mainContent">{children}</div>
     </div>

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -14,14 +14,14 @@ const Footer = () => {
             <Link href="/" className="flex">
               <Image width="113" height="40" src="/images/keep.svg" alt="Keep React" />
             </Link>
-            <p className="mt-6 max-w-lg text-body-4 font-normal text-metal-700">
+            <p className="mt-6 max-w-lg text-body-3 font-normal text-metal-700">
               Keep React is an open-source component library built on Tailwind CSS and React.js. It provides a versatile
               set of pre-designed UI components to build modern web applications.
             </p>
           </div>
           <div>
-            <h4 className="mb-3 text-body-4 font-medium uppercase text-metal-900">RESOURCES</h4>
-            <ul className="flex flex-col gap-3 text-body-4 font-normal text-metal-700">
+            <h4 className="mb-3 text-body-3 font-medium uppercase text-metal-900">RESOURCES</h4>
+            <ul className="flex flex-col gap-3 text-body-3 font-normal text-metal-700">
               <li>
                 <a href="https://github.com/StaticMania/keep-react" target="_blank">
                   GitHub
@@ -44,8 +44,8 @@ const Footer = () => {
         </div>
       </div>
       <div className="border-t border-t-metal-100 py-5 text-center">
-        <p className="text-body-4 font-normal text-metal-900">
-          &copy;{new Date().getFullYear()} All Rights Reserved by
+        <p className="text-body-3 font-normal text-metal-900">
+          &copy;{new Date().getFullYear()} All Rights Reserved by &nbsp;
           <a href="https://staticmania.com/" target="_blank" className="font-medium">
             StaticMania
           </a>

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -42,7 +42,7 @@ const Navbar = () => {
                   key={nav.id}
                   href={nav.href}
                   target={nav.redirect ? '_blank' : '_self'}
-                  className="text-body-5 font-normal text-metal-500 hover:text-metal-900 active:text-metal-900">
+                  className="text-body-4 font-normal text-metal-500 hover:text-metal-900 active:text-metal-900">
                   {nav.name}
                 </Link>
               ))}
@@ -87,7 +87,7 @@ const Navbar = () => {
             </a>
             <Link
               href="/docs/getting-started/Introduction"
-              className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-5 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
+              className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-4 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
               get started
             </Link>
           </div>

diff --git a/app/docs.css b/app/docs.css
@@ -1,8 +1,8 @@
 #mainContent > h2 {
-  @apply border-b border-b-metal-200 pb-2 text-body-3 font-semibold leading-6 tracking-[-0.3px] text-metal-900;
+  @apply border-b border-b-metal-200 pb-2 text-body-2 font-semibold text-metal-900;
 }
 #mainContent > p {
-  @apply mt-4 text-body-5 font-normal leading-6 tracking-[-0.3px] text-metal-700 md:text-body-4;
+  @apply mt-4 text-body-3 font-normal text-metal-500;
 }
 
 #mainContent > p a {
@@ -56,7 +56,7 @@
 }
 
 #visible-table-of-contents li {
-  @apply my-2 -ml-px border-l border-l-transparent pl-3 text-body-5 leading-7 tracking-[-0.2px] text-metal-500 hover:border-l-metal-900 hover:text-metal-900  active:text-metal-900;
+  @apply my-2 -ml-px border-l border-l-transparent pl-3 text-body-4 text-metal-500 hover:border-l-metal-900 hover:text-metal-900 active:text-metal-900;
 }
 
 #visible-table-of-contents li:has(.active-link) {

diff --git a/app/docs/components/card/variant/PostCard.tsx b/app/docs/components/card/variant/PostCard.tsx
@@ -18,11 +18,11 @@ const PostCard = () => {
         <Card.Container className="absolute flex items-start px-5 py-3">
           <Card.Container>
             <Card.Title className=" font-medium text-white md:text-body-2">Keep Design System</Card.Title>
-            <Card.Description className="text-body-6 font-normal text-white md:text-body-5">
+            <Card.Description className="text-body-5 font-normal text-white md:text-body-5">
               Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo excepturi quam incidunt tempora?
             </Card.Description>
             <Card.Link
-              className="mt-3 flex items-center gap-1 text-body-6 font-normal text-white md:text-body-5"
+              className="mt-3 flex items-center gap-1 text-body-5 font-normal text-white md:text-body-5"
               href="/"
               icon={<CaretRight size={16} color="#fff" />}
               iconPosition="left">
@@ -49,7 +49,7 @@ const PostCard = () => {
             <Card.Title className="text-body-5 font-medium text-metal-700 md:text-body-2">
               Keep Design System
             </Card.Title>
-            <Card.Description className="text-body-6 font-normal text-metal-500 md:text-body-5">
+            <Card.Description className="text-body-5 font-normal text-metal-500 md:text-body-5">
               Component design systems can help developers to be more productive by providing them with a ready-made set
               of components to use.
             </Card.Description>
@@ -84,12 +84,12 @@ export const CardComponent = () => {
             <Card.Title className=" md:text-body-2 font-medium text-white">
               Keep React
             </Card.Title>
-            <Card.Description className="text-body-6 md:text-body-5 font-normal text-white">
+            <Card.Description className="text-body-5 md:text-body-5 font-normal text-white">
               Component design systems can help developers to be more productive
               by providing them with a ready-made set of components to use.
             </Card.Description>
             <Card.Link
-              className="mt-3 flex items-center gap-1 text-body-6 md:text-body-5 font-normal text-white"
+              className="mt-3 flex items-center gap-1 text-body-5 md:text-body-5 font-normal text-white"
               href="/"
               icon={<CaretRight size={16} color="#fff" />}
               iconPosition="left"
@@ -117,7 +117,7 @@ export const CardComponent = () => {
             <Card.Title className="text-body-5 md:text-body-2 font-medium text-metal-700">
               Keep React
             </Card.Title>
-            <Card.Description className="text-body-6 md:text-body-5 font-normal text-metal-500">
+            <Card.Description className="text-body-5 md:text-body-5 font-normal text-metal-500">
               Component design systems can help developers to be more productive
               by providing them with a ready-made set of components to use.
             </Card.Description>

diff --git a/app/docs/components/card/variant/PricingCard.tsx b/app/docs/components/card/variant/PricingCard.tsx
@@ -13,7 +13,7 @@ const PricingCard = () => {
         <Card.Container>
           <Card.Title className="text-body-4 font-medium text-primary-500 md:text-body-2">Business</Card.Title>
           <Card.Title className="my-3 flex items-center">
-            <span className="text-description-2 font-bold text-metal-800 md:text-heading-4">$79</span>
+            <span className="text-heading-6 font-bold text-metal-800 md:text-heading-3">$79</span>
             <span className="ml-1 text-body-4 font-medium text-metal-400">/ mth</span>
           </Card.Title>
           <Card.Description className="text-body-5 text-metal-700 md:text-body-4">
@@ -69,7 +69,7 @@ export const CardComponent = () => {
             Business
           </Card.Title>
           <Card.Title className="flex items-center my-3">
-            <span className="text-heading-4 font-bold text-metal-800">$79</span>
+            <span className="text-heading-3 font-bold text-metal-800">$79</span>
             <span className="ml-1 text-body-4 font-medium text-metal-400">
               / mth
             </span>

diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx
@@ -55,8 +55,8 @@ const ProductCard = () => {
               <Card.Description className="text-body-5 font-medium text-metal-500">By Static Mania</Card.Description>
             </Card.Container>
             <Card.Container className="flex items-center justify-between">
-              <Card.Title className="text-body-6 font-medium text-metal-500">4:05</Card.Title>
-              <Card.Title className="text-body-6 font-medium text-metal-500">10:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">4:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">10:05</Card.Title>
             </Card.Container>
             <LineProgress progress={45} />
             <Card.Container className="flex items-center justify-between">
@@ -175,8 +175,8 @@ export const CardComponent = () => {
               <Card.Description className="text-body-5 font-medium text-metal-500">By Static Mania</Card.Description>
             </Card.Container>
             <Card.Container className="flex items-center justify-between">
-              <Card.Title className="text-body-6 font-medium text-metal-500">4:05</Card.Title>
-              <Card.Title className="text-body-6 font-medium text-metal-500">10:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">4:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">10:05</Card.Title>
             </Card.Container>
             <LineProgress progress={45} />
             <Card.Container className="flex items-center justify-between">

diff --git a/app/docs/components/card/variant/ProfileCard.tsx b/app/docs/components/card/variant/ProfileCard.tsx
@@ -15,7 +15,7 @@ const ProfileCard = () => {
           <Avatar size="lg" shape="circle" img="https://randomuser.me/api/portraits/men/11.jpg" />
           <Card.Container className="ml-3">
             <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Md Ariful Islam</Card.Title>
-            <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
+            <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
           </Card.Container>
         </Card.Container>
       </Card>
@@ -28,7 +28,7 @@ const ProfileCard = () => {
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">
             Khairul Islam Ridoy
           </Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="circled mx-auto flex max-w-[220px] items-center justify-center divide-x divide-metal-200 rounded-md border border-metal-200 p-1 md:p-2">
           <Card.Link
@@ -69,7 +69,7 @@ export const CardComponent = () => {
           <Avatar size="lg" shape="circle" img="https://randomuser.me/api/portraits/men/11.jpg" />
           <Card.Container className="ml-3">
             <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Md Ariful Islam</Card.Title>
-            <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
+            <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
           </Card.Container>
         </Card.Container>
       </Card>
@@ -86,7 +86,7 @@ export const CardComponent = () => {
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">
             Khairul Islam Ridoy
           </Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="circled mx-auto flex max-w-[220px] items-center justify-center divide-x divide-metal-200 rounded-md border border-metal-200 p-1 md:p-2">
           <Card.Link

diff --git a/app/docs/components/card/variant/ProfileCardWithCover.tsx b/app/docs/components/card/variant/ProfileCardWithCover.tsx
@@ -17,7 +17,7 @@ const ProfileCardWithCover = () => {
         </Card.Container>
         <Card.Container className="mb-3 mt-10 text-center">
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Khairul Islam</Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="flex w-full justify-between border-t border-t-metal-50 px-5 py-3">
           <Card.Container className="text-center">
@@ -64,7 +64,7 @@ export const CardComponent = () => {
         </Card.Container>
         <Card.Container className="mb-3 mt-10 text-center">
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Khairul Islam</Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="flex w-full justify-between border-t border-t-metal-50 px-5 py-3">
           <Card.Container className="text-center">

diff --git a/app/docs/components/dropdown/variant/CustomDropdown.tsx b/app/docs/components/dropdown/variant/CustomDropdown.tsx
@@ -47,7 +47,7 @@ const CustomDropdown = () => {
               <Typography variant="p" className="text-body-5 font-medium text-metal-800">
                 {data.name}
               </Typography>
-              <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+              <Typography variant="p" className="text-body-5 font-normal text-metal-400">
                 {data.title}
               </Typography>
             </div>
@@ -75,7 +75,7 @@ export const DropdownComponent = () => {
               <Typography variant="p" className="text-body-5 font-medium text-metal-800">
                 {data.name}
               </Typography>
-              <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+              <Typography variant="p" className="text-body-5 font-normal text-metal-400">
                 {data.title}
               </Typography>
             </div>

diff --git a/app/docs/components/modal/variant/HistoryModal.tsx b/app/docs/components/modal/variant/HistoryModal.tsx
@@ -53,7 +53,7 @@ const HistoryModal = () => {
               <Avatar img="/images/avatar/avatar-4.png" />
               <div>
                 <p className="text-body-5 font-semibold text-gray-500">Albert Flores</p>
-                <p className="text-body-6 text-gray-500">[email protected]</p>
+                <p className="text-body-5 text-gray-500">[email protected]</p>
               </div>
             </div>
           </div>
@@ -135,7 +135,7 @@ export const ModalComponent = () => {
               <Avatar shape="circle" img="/images/avatar/avatar-4.png" statusPosition="bottom-right" size="md" />
               <div>
                 <p className="text-body-5 font-semibold text-gray-500">Albert Flores</p>
-                <p className="text-body-6 text-gray-500">[email protected]</p>
+                <p className="text-body-5 text-gray-500">[email protected]</p>
               </div>
             </div>
           </div>

diff --git a/app/docs/components/table/variant/BorderedTable.tsx b/app/docs/components/table/variant/BorderedTable.tsx
@@ -28,7 +28,7 @@ const BorderedTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -136,7 +136,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell>Status</Table.HeadCell>
         <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>

diff --git a/app/docs/components/table/variant/DefaultTable.tsx b/app/docs/components/table/variant/DefaultTable.tsx
@@ -34,7 +34,7 @@ const DefaultTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -144,7 +144,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell>Status</Table.HeadCell>
         <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>