♻️ #15 - refactor: refactor styling

src/components/breadcrumbs/breadcrumbs.scss

@@ -20,16 +20,8 @@
     }
   }
 
-  &__link {
-    cursor: pointer;
-    text-decoration: none;
-    color: inherit;
-    font-size: var(--typography-font-size-body-xs);
-  }
-
-  &__separator {
+  .mykn-icon {
     color: var(--theme-color-primary-800);
-    height: 20px;
-    width: 20px;
+    margin: 0 var(--spacing-h-xs);
   }
 }

src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import React from "react";
 
 import { Outline } from "../icon";
@@ -37,28 +36,21 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
 }) => {
   return (
     <nav className="mykn-breadcrumbs" {...props}>
-      <Ol className="mykn-breadcrumbs__list">
+      <Ol inline listStyle="none">
         {pathItems.map((item, index) => {
           const isLastItem = index === pathItems.length - 1;
 
           return (
-            <Li
-              key={item.path}
-              size="xs"
-              className={clsx("mykn-breadcrumbs__item", {
-                "mykn-breadcrumbs__item--last": isLastItem,
-              })}
-            >
+            <Li key={item.path} size="xs">
               <A
                 href={item.path}
+                muted={!isLastItem}
+                textDecoration="none"
                 onClick={() => onClick?.(item.path)}
-                className="mykn-breadcrumbs__link"
               >
                 {item.label}
               </A>
-              {!isLastItem && (
-                <Outline.ChevronRightIcon className="mykn-breadcrumbs__separator" />
-              )}
+              {!isLastItem && <Outline.ChevronRightIcon />}
             </Li>
           );
         })}

src/components/typography/a/a.scss

@@ -1,18 +1,31 @@
-@use '../p/p';
+@use "../p/p";
 
 .mykn-a {
   @extend .mykn-p;
   color: var(--theme-color-primary-800);
   display: inline-flex;
+  font-size: inherit;
   justify-content: center;
   align-items: center;
   gap: 0.5em;
   width: fit-content;
 
+  &--text-decoration-none {
+    text-decoration: none;
+
+    &#{&}:hover {
+      text-decoration: underline;
+    }
+  }
+
   &:hover {
     text-decoration: none;
   }
 
+  &#{&}--muted {
+    @extend .mykn-p--muted;
+  }
+
   &[aria-current] {
     font-weight: var(--typography-font-weight-bold);
   }

src/components/typography/a/a.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React, { AnchorHTMLAttributes } from "react";
 
 import "./a.scss";
@@ -8,17 +9,37 @@ export type AProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
    * container or set of related elements.
    */
   active?: boolean;
+
+  /** Whether the text should be presented in a lighter color. */
+  muted?: boolean;
+
+  /** The text decoration. */
+  textDecoration?: "underline" | "none";
 };
 
 /**
  * Anchor (<a>) component
  * @param active
  * @param children
+ * @param muted
+ * @param textDecoration
  * @param props
  * @constructor
  */
-export const A: React.FC<AProps> = ({ active, children, ...props }) => (
-  <a className="mykn-a" aria-current={active} {...props}>
+export const A: React.FC<AProps> = ({
+  active,
+  children,
+  muted,
+  textDecoration = "underline",
+  ...props
+}) => (
+  <a
+    className={clsx("mykn-a", `mykn-a--text-decoration-${textDecoration}`, {
+      "mykn-a--muted": muted,
+    })}
+    aria-current={active}
+    {...props}
+  >
     {children}
   </a>
 );

src/components/typography/li/li.scss

@@ -2,4 +2,8 @@
 
 .mykn-li {
   @extend .mykn-p;
+
+  &--size-xs {
+    @extend .mykn-p--size-xs;
+  }
 }

src/components/typography/li/li.tsx

@@ -3,34 +3,20 @@ import React from "react";
 
 import "./li.scss";
 
-export type LiProps = React.PropsWithChildren<
-  {
-    /** The size of the text. */
-    size?: "s" | "xs";
-
-    /** Additional class names to apply to the component */
-    className?: string;
-  } & React.HTMLAttributes<HTMLLIElement>
->;
+export type LiProps = React.HTMLAttributes<HTMLLIElement> & {
+  /** The size of the text. */
+  size?: "s" | "xs";
+};
 
 /**
  * Li component
  * @param children
  * @param size
- * @param className
  * @param props
  * @constructor
  */
-export const Li: React.FC<LiProps> = ({
-  children,
-  size = "s",
-  className,
-  ...props
-}) => (
-  <li
-    className={clsx("mykn-li", `mykn-li--size-${size}`, className)}
-    {...props}
-  >
+export const Li: React.FC<LiProps> = ({ children, size = "s", ...props }) => (
+  <li className={clsx("mykn-li", `mykn-li--size-${size}`)} {...props}>
     {children}
   </li>
 );

src/components/typography/ol/ol.scss

@@ -5,6 +5,15 @@
   list-style-position: inside;
   padding-inline-start: 0;
 
+  &--inline .mykn-li {
+    float: left; // fallback
+    float: inline-start;
+  }
+
+  &--list-style-none {
+    list-style: none;
+  }
+
   .mykn-ol {
     padding-inline-start: var(--spacing-h-xl);
   }

src/components/typography/ol/ol.tsx

@@ -4,32 +4,40 @@ import React from "react";
 import { PProps } from "../p";
 import "./ol.scss";
 
-export type OlProps = React.PropsWithChildren<
-  {
-    /** The size of the text. */
-    size?: PProps["size"];
+export type OlProps = React.HTMLAttributes<HTMLOListElement> & {
+  /** Whether to show list items inline. */
+  inline?: boolean;
 
-    /** Additional class names to apply to the component */
-    className?: string;
-  } & React.HTMLAttributes<HTMLOListElement>
->;
+  /** The list style. */
+  listStyle?: "decimal" | "none";
+
+  /** The size of the text. */
+  size?: PProps["size"];
+};
 
 /**
  * Ol component
  * @param children
+ * @param inline
+ * @param listStyle
  * @param size
- * @param className
  * @param props
  * @constructor
  */
 export const Ol: React.FC<OlProps> = ({
   children,
+  inline = false,
+  listStyle,
   size = "s",
-  className,
   ...props
 }) => (
   <ol
-    className={clsx("mykn-ol", `mykn-ol--size-${size}`, className)}
+    className={clsx(
+      "mykn-ol",
+      `mykn-ol--size-${size}`,
+      `mykn-ol--list-style-${listStyle}`,
+      { "mykn-ol--inline": inline },
+    )}
     {...props}
   >
     {children}

src/components/typography/p/p.tsx

@@ -14,6 +14,7 @@ export type PProps = React.PropsWithChildren<{
 /**
  * Ul component
  * @param children
+ * @param muted
  * @param size
  * @param props
  * @constructor

src/settings/tokens.css

@@ -60,7 +60,7 @@
   --typography-color-background: var(--theme-shade-0);
   --typography-color-h: var(--theme-shade-900);
   --typography-color-body: var(--theme-shade-700);
-  --typography-color-muted: var(--theme-shade-400);
+  --typography-color-muted: var(--theme-shade-600);
 
   --typography-font-size-h1: 24px;
   --typography-font-size-h2: 20px;