@jrgermain/stylesheet 0.2.0 → 0.3.0

package/src/styles/components/_text.scss

@@ -1,295 +0,0 @@
-@use "../utils";
-@use "./layout";
-
-@mixin highlighted-text($color) {
-  background-color: var(--color-#{$color}-8);
-  color: var(--color-#{$color}-2);
-  print-color-adjust: exact;
-}
-
-%heading-any {
-  font-family: var(--font-family-heading);
-  margin-block: 0.75em 0.3em;
-  line-height: 1.15;
-  text-wrap: balance;
-}
-
-h1,
-.h1,
-%h1 {
-  @extend %heading-any;
-
-  font-size: var(--font-size-4xl);
-  font-weight: var(--font-weight-black);
-}
-
-h2,
-.h2,
-%h2 {
-  @extend %heading-any;
-
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-bold);
-}
-
-h3,
-.h3,
-%h3 {
-  @extend %heading-any;
-
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-}
-
-h4,
-.h4,
-%h4 {
-  @extend %heading-any;
-
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-}
-
-h5,
-.h5,
-%h5 {
-  @extend %heading-any;
-
-  font-size: var(--font-size-l);
-  font-weight: var(--font-weight-semibold);
-}
-
-h6,
-.h6,
-%h6 {
-  @extend %heading-any;
-
-  font-size: var(--font-size-m);
-  font-weight: var(--font-weight-bold);
-}
-
-p,
-.p,
-li {
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-m);
-  font-weight: var(--font-weight-normal);
-  line-height: 1.6;
-  margin: 0;
-  text-wrap: pretty;
-  hanging-punctuation: first;
-}
-
-blockquote,
-.blockquote {
-  display: block;
-  margin: 0;
-  color: var(--color-gray-4);
-  border-inline-start: var(--border-l) solid var(--color-gray-transparent);
-  padding: var(--space-3xs);
-  padding-inline-start: var(--space-xs);
-  position: relative;
-  font-size: var(--font-size-m);
-  line-height: 1.25;
-  font-weight: var(--font-weight-normal);
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-gray-2);
-  }
-
-  :is(footer, .footer) {
-    margin-block-start: 0.5em;
-    font-size: var(--font-size-s);
-    font-style: initial;
-    color: var(--color-body-text);
-    font-weight: var(--font-weight-semibold);
-
-    :is(cite, .cite) {
-      font-weight: var(--font-weight-normal);
-      font-style: italic;
-    }
-  }
-}
-
-a,
-.a {
-  color: var(--color-sky-4);
-  font-weight: var(--font-weight-semibold);
-  text-decoration-line: underline;
-  text-decoration-color: var(--color-sky-transparent);
-  text-decoration-skip-ink: all;
-  text-decoration-thickness: var(--border-m);
-  text-underline-offset: 0.1em;
-  cursor: pointer;
-  transition: text-decoration-color 200ms ease;
-
-  &:is(:hover, .hover) {
-    text-decoration-color: currentcolor;
-  }
-
-  &:focus-visible {
-    outline-offset: 1px;
-  }
-
-  &[target="_blank"]:not(.no-external-icon, .button.icon)::after {
-    content: "";
-    print-color-adjust: exact;
-    mask-image: #{utils.svg-to-data-url(
-        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3"/></svg>'
-      )};
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    background-color: var(--color-gray-5);
-    display: inline-block;
-    height: 0.85em;
-    width: 0.85em;
-    vertical-align: baseline;
-    margin-left: 0.1em;
-  }
-
-  &[target="_blank"]:not(.no-external-icon, .button.icon).button::after {
-    background-color: currentcolor;
-  }
-}
-
-pre,
-.pre {
-  font-family: var(--font-family-mono);
-}
-
-code,
-.code,
-kbd,
-.kbd {
-  background-color: var(--color-gray-extra-transparent);
-  color: var(--color-gray-1);
-  font-family: var(--font-family-mono);
-  padding: 0 0.5ch;
-  margin: 0 0.25ch;
-  border-radius: var(--radius-s);
-  font-size: 0.9em;
-}
-
-samp,
-.samp {
-  display: block;
-  font-size: calc(0.9 * var(--font-size-m));
-  background-color: var(--color-gray-9);
-  color: var(--color-gray-1);
-  border: var(--border-s) dashed var(--color-outline);
-  border-radius: var(--radius-s);
-  padding: var(--space-3xs);
-  font-family: var(--font-family-mono);
-}
-
-:is(pre, .pre) > :is(code, .code) {
-  background-color: unset;
-}
-
-strong,
-.strong {
-  font-weight: var(--font-weight-bold);
-}
-
-em,
-.em {
-  font-style: italic;
-}
-
-::target-text {
-  @include highlighted-text("brand");
-}
-
-mark,
-.mark {
-  @include highlighted-text("yellow");
-}
-
-ins,
-.ins {
-  @include highlighted-text("green");
-
-  text-decoration-thickness: var(--border-m);
-  text-decoration-color: var(--color-green-4);
-}
-
-del,
-.del {
-  @include highlighted-text("red");
-  @include utils.transition("text-decoration-color", $duration: 150ms);
-
-  text-decoration-line: line-through;
-  text-decoration-skip-ink: none;
-  text-decoration-thickness: var(--border-m);
-  text-decoration-color: var(--color-red-4);
-
-  &:hover {
-    text-decoration-color: transparent;
-  }
-}
-
-:is(abbr, .abbr)[title] {
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties  -- using the shorthand doesn't work in safari */
-  text-decoration-color: var(--color-gray-6);
-  text-decoration-thickness: var(--border-m);
-  text-underline-offset: 0.1em;
-}
-
-small,
-.small {
-  font-size: 0.75em;
-  vertical-align: baseline;
-}
-
-sub,
-.sub,
-sup,
-.sup {
-  font-size: 0.75em;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub,
-.sub {
-  inset-block-end: -0.25em;
-}
-
-sup,
-.sup {
-  inset-block-start: -0.5em;
-}
-
-/* Add a gap between consecutive block text elements */
-// prettier-ignore
-:is(p, .p, blockquote, .blockquote, pre, .pre, samp, .samp, .alert, details):not(.alert-title, .accordion details) +
-  :is(p, .p, blockquote, .blockquote, pre, .pre, samp, .samp, .alert, details):not(.alert-title, .accordion details) {
-  margin-block-start: 0.75em;
-}
-
-.skip-link {
-  position: fixed;
-  z-index: 100;
-  top: var(--space-body);
-  left: var(--space-body);
-  background-color: var(--color-body-alt);
-  padding: var(--space-xs);
-  border-radius: var(--radius-m);
-  border: var(--border-l) solid currentcolor;
-  outline: 0;
-  box-shadow: var(--shadow-m);
-  text-decoration: none;
-  vertical-align: middle;
-
-  &:not(:focus) {
-    @extend %visually-hidden;
-  }
-
-  kbd {
-    margin-inline-start: var(--space-3xs);
-    font-weight: initial;
-  }
-}

package/src/styles/index.scss

@@ -1,47 +0,0 @@
-@use "./variables";
-@use "./components/alert";
-@use "./components/app";
-@use "./components/button";
-@use "./components/card";
-@use "./components/chip";
-@use "./components/details";
-@use "./components/dialog";
-@use "./components/field";
-@use "./components/hr";
-@use "./components/layout";
-@use "./components/progress-meter";
-@use "./components/range";
-@use "./components/skeleton";
-@use "./components/switch";
-@use "./components/table";
-@use "./components/text";
-@import "./experimental/dialog-animations";
-@import "./experimental/mobile-sidebar-fade-out";
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:where(:focus-visible) {
-  outline: var(--border-m) solid var(--color-brand-5);
-}
-
-html {
-  text-size-adjust: 100%;
-  color-scheme: light dark;
-}
-
-body {
-  min-height: 100svh;
-  margin: 0;
-  background-color: var(--color-body);
-  color: var(--color-body-text);
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-m);
-}
-
-.sr-only {
-  @extend %visually-hidden;
-}