@excom/valence 0.1.0

package/src/components/tooltip.css

@@ -0,0 +1,209 @@
+/**
+ * Tooltip ([role="tooltip"])
+ */
+
+@define-mixin module-tooltip {
+  [role="tooltip"] {
+    position: relative;
+
+    &:not(:--link, :--button, input) {
+      border-bottom: 1px dotted;
+      text-decoration: none;
+      cursor: help;
+    }
+
+    &[data-placement="top"]::before,
+    &[data-placement="top"]::after,
+    &::before,
+    &::after {
+      display: block;
+      z-index: 99;
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      padding: 0.25rem 0.5rem;
+      overflow: hidden;
+      transform: translate(-50%, -0.25rem);
+      border-radius: var(--v-border-radius);
+      background: var(--v-tooltip-background-color);
+      content: attr(aria-description);
+      color: var(--v-tooltip-color);
+      font-style: normal;
+      font-weight: var(--v-font-weight);
+      font-size: var(--v-font-size);
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Caret */
+    &[data-placement="top"]::after,
+    &::after {
+      padding: 0;
+      transform: translate(-50%, 0rem);
+      border-top: 0.3rem solid;
+      border-right: 0.3rem solid transparent;
+      border-left: 0.3rem solid transparent;
+      border-radius: 0;
+      background-color: transparent;
+      content: "";
+      color: var(--v-tooltip-background-color);
+    }
+
+    &[data-placement="bottom"] {
+      &::before,
+      &::after {
+        top: 100%;
+        bottom: auto;
+        transform: translate(-50%, 0.25rem);
+      }
+
+      &:after {
+        transform: translate(-50%, -0.3rem);
+        border: 0.3rem solid transparent;
+        border-bottom: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="left"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: 100%;
+        bottom: auto;
+        left: auto;
+        transform: translate(-0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-left: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="right"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 100%;
+        transform: translate(0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(-0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-right: 0.3rem solid;
+      }
+    }
+
+    /* Display */
+    &:focus,
+    &:hover {
+      &::before,
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    /* Animations, excluding touch devices */
+    @media (hover: hover) and (pointer: fine) {
+      /* Default (top) */
+      &:focus,
+      &:hover {
+        &::before,
+        &::after {
+          --v-tooltip-slide-to: translate(-50%, -0.25rem);
+          transform: translate(-50%, 0.75rem);
+          animation-duration: 0.2s;
+          animation-fill-mode: forwards;
+          animation-name: tooltip-slide;
+          opacity: 0;
+        }
+
+        &::after {
+          --v-tooltip-caret-slide-to: translate(-50%, 0rem);
+          transform: translate(-50%, -0.25rem);
+          animation-name: tooltip-caret-slide;
+        }
+      }
+
+      /* Bottom */
+      &[data-placement="bottom"] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            --v-tooltip-slide-to: translate(-50%, 0.25rem);
+            transform: translate(-50%, -0.75rem);
+            animation-name: tooltip-slide;
+          }
+
+          &::after {
+            --v-tooltip-caret-slide-to: translate(-50%, -0.3rem);
+            transform: translate(-50%, -0.5rem);
+            animation-name: tooltip-caret-slide;
+          }
+        }
+      }
+
+      /* Left */
+      &[data-placement="left"] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            --v-tooltip-slide-to: translate(-0.25rem, -50%);
+            transform: translate(0.75rem, -50%);
+            animation-name: tooltip-slide;
+          }
+
+          &::after {
+            --v-tooltip-caret-slide-to: translate(0.3rem, -50%);
+            transform: translate(0.05rem, -50%);
+            animation-name: tooltip-caret-slide;
+          }
+        }
+      }
+
+      /* Right */
+      &[data-placement="right"] {
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            --v-tooltip-slide-to: translate(0.25rem, -50%);
+            transform: translate(-0.75rem, -50%);
+            animation-name: tooltip-slide;
+          }
+
+          &::after {
+            --v-tooltip-caret-slide-to: translate(-0.3rem, -50%);
+            transform: translate(-0.05rem, -50%);
+            animation-name: tooltip-caret-slide;
+          }
+        }
+      }
+    }
+  }
+  @keyframes tooltip-slide {
+    to {
+      transform: var(--v-tooltip-slide-to);
+      opacity: 1;
+    }
+  }
+
+  @keyframes tooltip-caret-slide {
+    50% {
+      opacity: 0;
+    }
+    to {
+      transform: var(--v-tooltip-caret-slide-to);
+      opacity: 1;
+    }
+  }
+}

package/src/content/button.css

@@ -0,0 +1,184 @@
+/**
+ * Button
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-button {
+  :is(:--button) {
+    /* 1. Font styles (all browsers)
+       2. Drop Safari control margin
+       3. Show overflow in Edge */
+    margin: 0; /* 2 */
+    overflow: visible; /* 3 */
+    font-family: inherit; /* 1 */
+    text-transform: none; /* 1 */
+    /* Aliases must use `button` UA styles */
+    padding-block: 1px;
+    padding-inline: 6px;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    letter-spacing: normal;
+    text-rendering: auto;
+  }
+
+  /* Style buttons in iOS / Safari */
+  button,
+  [type="submit"],
+  [type="reset"],
+  [type="button"] {
+    -webkit-appearance: button;
+  }
+
+  :--button,
+  [type="submit"],
+  [type="reset"],
+  [type="file"]::file-selector-button {
+    --v-background-color: var(--v-primary-background);
+    --v-border-color: var(--v-primary-border);
+    --v-color: var(--v-primary-inverse);
+    --v-box-shadow: var(--v-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    padding: var(--v-form-element-spacing-vertical)
+      var(--v-form-element-spacing-horizontal);
+    border: var(--v-border-width) solid var(--v-border-color);
+    border-radius: var(--v-border-radius);
+    outline: none;
+    background-color: var(--v-background-color);
+    box-shadow: var(--v-box-shadow);
+    color: var(--v-color);
+    font-weight: var(--v-font-weight);
+    font-size: var(--v-font-size);
+    line-height: var(--v-line-height);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+
+    transition:
+      background-color var(--v-transition),
+      border-color var(--v-transition),
+      color var(--v-transition),
+      box-shadow var(--v-transition);
+
+    &:is([aria-current]:not([aria-current="false"])),
+    &:is(:hover, :active, :focus) {
+      --v-background-color: var(--v-primary-hover-background);
+      --v-border-color: var(--v-primary-hover-border);
+      --v-box-shadow: var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+      --v-color: var(--v-primary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --v-box-shadow:
+        var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(--v-outline-width) var(--v-primary-focus);
+    }
+  }
+
+  [type="submit"],
+  [type="reset"],
+  [type="button"] {
+    margin-bottom: var(--v-spacing);
+  }
+
+  /**
+   * Secondary button / submit flavor.
+   * @cssclass secondary
+   */
+  /* Secondary */
+  :is(:--button, [type="submit"]).secondary,
+  [type="reset"],
+  [type="file"]::file-selector-button {
+    --v-background-color: var(--v-secondary-background);
+    --v-border-color: var(--v-secondary-border);
+    --v-color: var(--v-secondary-inverse);
+    cursor: pointer;
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --v-background-color: var(--v-secondary-hover-background);
+      --v-border-color: var(--v-secondary-hover-border);
+      --v-color: var(--v-secondary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --v-box-shadow:
+        var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(--v-outline-width) var(--v-secondary-focus);
+    }
+  }
+
+  /**
+   * High-contrast button / submit flavor.
+   * @cssclass contrast
+   */
+  /* Contrast */
+  :is(:--button, [type="submit"]).contrast {
+    --v-background-color: var(--v-contrast-background);
+    --v-border-color: var(--v-contrast-border);
+    --v-color: var(--v-contrast-inverse);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --v-background-color: var(--v-contrast-hover-background);
+      --v-border-color: var(--v-contrast-hover-border);
+      --v-color: var(--v-contrast-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --v-box-shadow:
+        var(--v-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(--v-outline-width) var(--v-contrast-focus);
+    }
+  }
+
+  /**
+   * Outline (ghost) button flavor — pair with `.secondary` / `.contrast`.
+   * @cssclass outline
+   */
+  /* Outline (primary) */
+  :is(:--button, [type="submit"]).outline,
+  [type="reset"].outline {
+    --v-background-color: transparent;
+    --v-color: var(--v-primary);
+    --v-border-color: var(--v-primary);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --v-background-color: transparent;
+      --v-color: var(--v-primary-hover);
+      --v-border-color: var(--v-primary-hover);
+    }
+  }
+
+  /* Outline (secondary) */
+  :is(:--button, [type="submit"]).outline.secondary,
+  [type="reset"].outline {
+    --v-color: var(--v-secondary);
+    --v-border-color: var(--v-secondary);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --v-color: var(--v-secondary-hover);
+      --v-border-color: var(--v-secondary-hover);
+    }
+  }
+
+  /* Outline (contrast) */
+  :is(:--button, [type="submit"]).outline.contrast {
+    --v-color: var(--v-contrast);
+    --v-border-color: var(--v-contrast);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --v-color: var(--v-contrast-hover);
+      --v-border-color: var(--v-contrast-hover);
+    }
+  }
+
+  /* Button [disabled] */
+  :where(:--button, [type="submit"], [type="reset"]):--button--disabled,
+  :where(fieldset[disabled]) :is(:--button, [type="submit"], [type="reset"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

package/src/content/code.css

@@ -0,0 +1,68 @@
+/**
+ * Code
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-code {
+  /* 1. Inherit / scale font-size
+     2. Fix odd `em` sizing */
+  :--pre,
+  :--code,
+  :--kbd,
+  :--samp {
+    font-size: var(--v-font-size); /* 2 */
+    font-family: var(--v-font-family); /* 1 */
+  }
+
+  :--pre :--code,
+  :--pre :--samp {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  /* Don't overflow the container (opinionated) */
+  :--pre {
+    -ms-overflow-style: scrollbar;
+    overflow: auto;
+  }
+
+  :--pre,
+  :--code,
+  :--kbd,
+  :--samp {
+    border-radius: var(--v-border-radius);
+    background: var(--v-code-background-color);
+    color: var(--v-code-color);
+    font-weight: var(--v-font-weight);
+    line-height: initial;
+  }
+
+  :--code,
+  :--kbd,
+  :--samp {
+    display: inline-block;
+    padding: 0.12rem 0.25rem;
+  }
+
+  :--pre {
+    display: block;
+    margin-bottom: var(--v-spacing);
+    overflow-x: auto;
+
+    > :--code,
+    > :--samp {
+      display: block;
+      padding: var(--v-spacing);
+      background: none;
+      line-height: var(--v-line-height);
+    }
+  }
+
+  /* kbd */
+  :--kbd {
+    background-color: var(--v-code-kbd-background-color);
+    color: var(--v-code-kbd-color);
+    vertical-align: baseline;
+  }
+}

package/src/content/embedded.css

@@ -0,0 +1,49 @@
+/**
+ * Embedded content
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-embedded {
+  /* Middle-align media (opinionated) */
+  :where(audio, canvas, iframe, :--img, svg, video) {
+    vertical-align: middle;
+  }
+
+  /* IE 9- display */
+  audio,
+  video {
+    display: inline-block;
+  }
+
+  /* iOS 4-7 display */
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  /* No iframe border (opinionated) */
+  :where(iframe) {
+    border-style: none;
+  }
+
+  /* 1. No border on linked images in IE 10
+     2. Responsive by default */
+  :--img {
+    display: inline;
+    max-width: 100%; /* 2 */
+    height: auto; /* 2 */
+    border-style: none; /* 1 */
+  }
+
+  /* SVG fill matches text color (opinionated) */
+  :where(svg:not([fill])) {
+    fill: currentColor;
+  }
+
+  /* Hide overflow in IE */
+  svg:not(:root),
+  svg:not(:host) {
+    overflow: hidden;
+  }
+}

package/src/content/figure.css

@@ -0,0 +1,17 @@
+/**
+ * Figure
+ */
+
+@define-mixin module-figure {
+  :--figure {
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    :--figcaption {
+      display: block;
+      padding: calc(var(--v-spacing) * 0.5) 0;
+      color: var(--v-muted-color);
+    }
+  }
+}

package/src/content/link.css

@@ -0,0 +1,79 @@
+/**
+ * Link
+ */
+
+@define-mixin module-link {
+  :where(:--link:not(:--button)) {
+    --v-color: var(--v-primary);
+    --v-background-color: transparent;
+    --v-underline: var(--v-primary-underline);
+    display: inline;
+    outline: none;
+    background-color: var(--v-background-color); /* 1 */
+    color: var(--v-color);
+    text-decoration: var(--v-text-decoration);
+    text-decoration-color: var(--v-underline);
+    text-underline-offset: 0.125em;
+
+    transition:
+      background-color var(--v-transition),
+      color var(--v-transition),
+      text-decoration var(--v-transition),
+      box-shadow var(--v-transition);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --v-color: var(--v-primary-hover);
+      --v-underline: var(--v-primary-hover-underline);
+      --v-text-decoration: underline;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--v-outline-width) var(--v-primary-focus);
+    }
+
+    /* Secondary */
+    /**
+     * Muted / secondary link flavor.
+     * @cssclass secondary
+     */
+    &.secondary {
+      --v-color: var(--v-secondary);
+      --v-underline: var(--v-secondary-underline);
+
+      &:is(
+        [aria-current]:not([aria-current="false"]),
+        :hover,
+        :active,
+        :focus
+      ) {
+        --v-color: var(--v-secondary-hover);
+        --v-underline: var(--v-secondary-hover-underline);
+      }
+    }
+
+    /* Contrast */
+    /**
+     * High-contrast link flavor.
+     * @cssclass contrast
+     */
+    &.contrast {
+      --v-color: var(--v-contrast);
+      --v-underline: var(--v-contrast-underline);
+
+      &:is(
+        [aria-current]:not([aria-current="false"]),
+        :hover,
+        :active,
+        :focus
+      ) {
+        --v-color: var(--v-contrast-hover);
+        --v-underline: var(--v-contrast-hover-underline);
+      }
+    }
+  }
+
+  /* Anchor-as-button needs block-like layout */
+  a:--button {
+    display: inline-block;
+  }
+}

package/src/content/misc.css

@@ -0,0 +1,29 @@
+/**
+ * Misc
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-misc {
+  /* 1. Inherit border-color in Firefox
+     2. Box-sizing in Firefox */
+  :--hr {
+    display: block;
+    height: 0; /* 2 */
+    margin: var(--v-typography-spacing-vertical) 0;
+    border: 0;
+    border-top: 1px solid var(--v-muted-border-color);
+    color: inherit; /* 1 */
+  }
+
+  /* IE 10+ display */
+  [hidden],
+  template {
+    display: none !important;
+  }
+
+  /* Add the correct display in IE 9- */
+  canvas {
+    display: inline-block;
+  }
+}