fix(separator): improve css #30

Author: airikej

src/tedi/components/misc/separator/separator.module.scss

@@ -70,7 +70,7 @@ $dot-colors: (
   }
 }
 
-%separator-dotted-base {
+.tedi-separator--dotted {
   &::before {
     position: absolute;
     content: '';
@@ -85,10 +85,6 @@ $dot-colors: (
   }
 }
 
-.tedi-separator--dotted {
-  @extend %separator-dotted-base;
-}
-
 .tedi-separator--dot-only {
   position: relative;
   display: inline-block;
@@ -145,7 +141,7 @@ $dot-colors: (
           right: 0;
           left: 0;
           margin: auto;
-        } @else if $pos == end {
+        } @else {
           right: 0;
           left: auto;
         }
@@ -157,7 +153,7 @@ $dot-colors: (
           top: 0;
           bottom: 0;
           margin: auto 0;
-        } @else if $pos == end {
+        } @else {
           top: auto;
           bottom: 0;
         }
@@ -226,15 +222,11 @@ $dot-colors: (
   &::before {
     background-color: var(--general-surface-primary);
     border-style: solid;
-    border-width: var(--separator-thickness, 1px);
+    border-width: var(--separator-thickness);
   }
 
   @each $name, $color in $dot-colors {
-    &.tedi-separator--#{$name}::before {
-      z-index: 10;
-      border-color: $color;
-    }
-
+    &.tedi-separator--#{$name}::before,
     &.tedi-separator--dotted-#{$name}::before {
       z-index: 10;
       border-color: $color;

src/tedi/components/misc/separator/separator.tsx

@@ -38,7 +38,7 @@ export interface SeparatorSharedProps {
   isStretched?: boolean;
   /**
    * Semantic color token
-   * @default 'primary'
+   * @default primary
    */
   color?: 'primary' | 'secondary' | 'accent';
   /**