@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.0

package/src/Atom/Text/_text-sizes.css

@@ -1,115 +0,0 @@
-@layer design-system.atoms {
-  :is(
-    .mx-text--section-headline,
-    .mx-text--embellished-headline,
-    .mx-text--lede,
-    .mx-text--xs,
-    .mx-text--s,
-    .mx-text--m,
-    .mx-text--l,
-    .mx-text--xl,
-    .mx-text--xxl,
-    .mx-text--xxxl,
-    .mx-text--fluid
-  ) {
-    font-size: var(--font-size);
-  }
-
-  @supports (font-size: 1cqi) {
-    :is(
-      .mx-text--section-headline,
-      .mx-text--lede,
-      .mx-text--m,
-      .mx-text--l,
-      .mx-text--xl,
-      .mx-text--xxl,
-      .mx-text--xxxl,
-      .mx-text--fluid
-    ) {
-      --font-min: calc(var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3));
-
-      font-size: clamp(
-        max(var(--base-font-size), var(--font-min)),
-        var(--font-min) + 1cqi,
-        var(--font-size)
-      );
-    }
-  }
-
-  .mx-text--section-headline {
-    --font-size: var(--font-size-m);
-
-    font-weight: var(--heading-font-weight, var(--font-weight-bold));
-    font-family: var(--heading-font-family, var(--font-family));
-    line-height: var(--line-height-h);
-    color: var(--foreground, var(--colour-foreground-alt));
-    margin-block-start: 0;
-    text-wrap: balance;
-
-    & + :is(h2, h3) {
-      margin-block-start: var(--spacing-xxxxs) !important;
-    }
-  }
-
-  .mx-text--embellished-headline {
-    --font-size: var(--font-size-s);
-
-    text-transform: uppercase;
-    position: relative;
-    font-weight: var(--heading-font-weight, var(--font-weight-bold));
-    font-family: var(--heading-font-family, var(--font-family));
-    line-height: var(--line-height-h);
-    margin-block: 0 var(--spacing-l);
-    text-wrap: balance;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      inline-size: var(--spacing-xxxl);
-      block-size: 3px;
-      background-color: var(--colour-primary);
-      inset-block-end: -8px;
-    }
-  }
-
-  .mx-text--lede {
-    --font-size: var(--font-size-sm);
-  }
-
-  .mx-text--xxxl {
-    --font-size: var(--font-size-xxxl);
-
-    line-height: var(--line-height-h);
-  }
-
-  .mx-text--xxl {
-    --font-size: var(--font-size-xxl);
-
-    line-height: var(--line-height-h);
-  }
-
-  .mx-text--xl {
-    --font-size: var(--font-size-xl);
-
-    line-height: var(--line-height-h);
-  }
-
-  .mx-text--l {
-    --font-size: var(--font-size-l);
-
-    line-height: var(--line-height-h);
-  }
-
-  .mx-text--m {
-    --font-size: var(--font-size-m);
-  }
-
-  .mx-text--s {
-    --font-size: var(--font-size-s);
-  }
-
-  .mx-text--xs {
-    --font-size: var(--font-size-xs);
-  }
-}

package/src/Atom/Text/text-styles-example.twig

@@ -1,21 +0,0 @@
-
-<p class="mx-text--embellished-headline">Embelished headline: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--section-headline">Section headline: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--xxxl">Text xxxl: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--xxl">Text xxl: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--xl">Text xl: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--l">Text l: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--m">Text m: Lorem ipsum dolor sit amet consectetur</p>
-
-<p>Text: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--s">Text s: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-text--xs">Text xs: Lorem ipsum dolor sit amet consectetur</p>
-

package/src/Atom/_print.css

@@ -1,9 +0,0 @@
-@media print {
-  .contextual {
-    display: none;
-  }
-
-  .mx-rich-text {
-    max-inline-size: 100%;
-  }
-}

package/src/Component/Card/card-grid.twig

@@ -1,10 +0,0 @@
-{% embed '@mixtape/Layout/Section/section.twig' with {
-  modifier_class: 'mx-section--l',
-  layout_class: 'mx-grid mx-grid--md-3-cols'
-} %}
-  {% block content %}
-    {% include '@mixtape/Component/Card/twig/old-card.twig' %}
-    {% include '@mixtape/Component/Card/twig/old-card.twig' %}
-    {% include '@mixtape/Component/Card/twig/old-card.twig' %}
-  {% endblock %}
-{% endembed %}

package/src/Layout/Grid/container-grid.css

@@ -1,191 +0,0 @@
-/**
- * Container Grid
- * @todo update classes
- */
-@layer design-system.layouts {
-  .grid.container {
-    --container-name: grid-item;
-
-    @container grid-item (min-width: token("breakpoint.l")) {
-      --grid-gap: var(--large-grid-gap, var(--gap-l));
-    }
-
-    &
-      :is(
-        .grid--11-col,
-        .grid--10-col,
-        .grid--9-col,
-        .grid--8-col,
-        .grid--7-col,
-        .grid--6-col,
-        .grid--5-col,
-        .grid--4-col,
-        .grid--3-col,
-        .grid--2-col,
-        .grid--1-col
-      ) {
-      --grid-repeat: 12;
-      --grid-span: 12;
-    }
-
-    & .grid--11-col {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 11;
-      }
-    }
-
-    & .grid--10-col {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 10;
-      }
-    }
-
-    & .grid--9-col {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 9;
-      }
-    }
-
-    & .grid--8-col {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 8;
-      }
-    }
-
-    & .grid--7-col {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 7;
-      }
-    }
-
-    & .grid--6-col {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 6;
-      }
-    }
-
-    & .grid--5-col {
-      @container grid-item (min-width: token("breakpoint.s")) {
-        --grid-span: 6;
-      }
-
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 5;
-      }
-    }
-
-    & .grid--4-col {
-      @container grid-item (min-width: token("breakpoint.s")) {
-        --grid-span: 6;
-      }
-
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 4;
-      }
-    }
-
-    & .grid--3-col {
-      @container grid-item (min-width: token("breakpoint.s")) {
-        --grid-span: 6;
-      }
-
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 3;
-      }
-    }
-
-    & .grid--2-col {
-      @container grid-item (min-width: token("breakpoint.s")) {
-        --grid-span: 3;
-      }
-
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 2;
-      }
-    }
-
-    & .grid--1-col {
-      @container grid-item (min-width: token("breakpoint.s")) {
-        --grid-span: 3;
-      }
-
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-span: 1;
-      }
-    }
-  }
-}
-
-/**
- * Dynamic Container Grid
- */
-
-@layer design-system.layouts {
-  .grid.container {
-    &:is(.grid--dynamic) {
-      /* This doesn't play nice in Safari and isn't required, so we unset the container. */
-      container-type: unset;
-    }
-
-    &:is(
-      .grid--xs-2-cols,
-      .grid--sm-2-cols,
-      .grid--md-2-cols,
-      .grid--md-3-cols,
-      .grid--lg-3-cols,
-      .grid--md-4-cols,
-      .grid--lg-4-cols,
-      .grid--xl-4-cols
-    ) {
-      --grid-repeat: 1;
-    }
-
-    &.grid--xs-2-cols {
-      @container grid-item (min-width: token("breakpoint.xs")) {
-        --grid-repeat: 2;
-      }
-    }
-
-    &.grid--sm-2-cols {
-      @container grid-item (min-width: token("breakpoint.s")) {
-        --grid-repeat: 2;
-      }
-    }
-
-    &.grid--md-2-cols {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-repeat: 2;
-      }
-    }
-
-    &.grid--md-3-cols {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-repeat: 3;
-      }
-    }
-
-    &.grid--lg-3-cols {
-      @container grid-item (min-width: token("breakpoint.l")) {
-        --grid-repeat: 3;
-      }
-    }
-
-    &.grid--md-4-cols {
-      @container grid-item (min-width: token("breakpoint.m")) {
-        --grid-repeat: 4;
-      }
-    }
-
-    &.grid--lg-4-cols {
-      @container grid-item (min-width: token("breakpoint.l")) {
-        --grid-repeat: 4;
-      }
-    }
-
-    &.grid--xl-4-cols {
-      @container grid-item (min-width: token("breakpoint.xl")) {
-        --grid-repeat: 4;
-      }
-    }
-  }
-}

package/src/Layout/Header/Components/Logo.tsx

@@ -1,17 +0,0 @@
-import { JSX } from "react"
-import Link from "../../../Atom/Link/Link"
-import Media from "../../../Atom/Media/Media"
-
-type LogoProps = {
-  to: string
-  src: string
-  alt: string
-}
-
-const Logo = ({ to, src, alt }: LogoProps): JSX.Element => (
-  <Link to={to} className="mx-logo">
-    <Media src={src} alt={alt} loading="eager"></Media>
-  </Link>
-)
-
-export default Logo

package/src/Utility/Hooks/useToggle.ts

@@ -1,14 +0,0 @@
-import { useState, useCallback } from "react"
-
-const useToggle = (initialValue: boolean): [boolean, (value?: boolean) => void] => {
-  const [on, setOn] = useState(initialValue)
-
-  const handleToggle = useCallback((value?: boolean): void => {
-    if (value) return setOn(value)
-    return setOn(v => !v)
-  }, [])
-
-  return [on, handleToggle]
-}
-
-export default useToggle