refactor(components): rewrite List component

* change `items` prop to children
* replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props
* add `hideMarker` prop
* add `spacing` prop to control item spacing
* move lists styles to Sass placeholders to avoid repeats because of
headless WordPress

1 files changed, 0 insertions, 61 deletions

diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 11b506f..c98533e 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -9,67 +9,6 @@ small {
   font-size: var(--font-size-sm);
 }
 
-ol {
-  list-style-type: none;
-  counter-reset: li;
-  padding: 0;
-
-  > li {
-    display: table;
-    counter-increment: li;
-
-    &::before {
-      content: counters(li, ".") ". ";
-      color: var(--color-secondary);
-      display: table-cell;
-      padding-right: var(--spacing-2xs);
-    }
-  }
-
-  li ol > li::before {
-    content: counters(li, ".") ". ";
-  }
-}
-
-ul,
-ol {
-  li {
-    margin-bottom: var(--spacing-2xs);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  ::marker {
-    color: var(--color-primary-dark);
-  }
-}
-
-ul {
-  padding-left: var(--spacing-sm);
-}
-
-dl {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--spacing-2xs);
-}
-
-ul,
-ol,
-dl {
-  margin: var(--spacing-sm) 0;
-
-  & & {
-    margin: var(--spacing-2xs) 0 0;
-  }
-
-  ::marker {
-    color: var(--color-primary-dark);
-  }
-}
-
 a {
   background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
     0 0 / 100% 201% no-repeat;