@dolanske/vui 1.4.1 → 1.4.2

package/src/style/tooltip.scss

@@ -1,146 +0,0 @@
-/*
-This is a trick in which you can add simply tooltips to an element without any additional html.
-Simple add data-title-_position_="Hello world" and hover the element.
-
-Available tooltip positions:
-*/
-
-[data-title-left],
-[data-title-right],
-[data-title-bottom],
-[data-title-bottom-left],
-[data-title-bottom-right],
-[data-title-top],
-[data-title-top-left],
-[data-title-top-right] {
-  position: relative;
-
-  &:before {
-    font-family: var(--global-font);
-    font-weight: var(--font-weight-regular);
-    background-color: var(--color-button-gray);
-    color: var(--color-text) !important;
-    box-shadow: var(--box-shadow-strong);
-
-    font-size: var(--font-size-m);
-    position: absolute;
-    padding: 4px 8px;
-    line-height: 1.3em;
-    border-radius: var(--border-radius-m);
-    transition: var(--transition);
-
-    max-width: 512px;
-    opacity: 0;
-    cursor: default;
-    z-index: var(--z-behind);
-    visibility: hidden;
-    pointer-events: none;
-    max-width: 256px;
-    width: max-content;
-  }
-
-  &:hover {
-    &:before {
-      visibility: visible;
-      opacity: 1;
-      z-index: var(--z-popout);
-    }
-  }
-}
-
-:root.light {
-  [data-title-left],
-  [data-title-right],
-  [data-title-bottom],
-  [data-title-bottom-left],
-  [data-title-bottom-right],
-  [data-title-top],
-  [data-title-top-left],
-  [data-title-top-right] {
-    &:before {
-      background-color: var(--color-bg-lowered);
-    }
-  }
-}
-
-[data-title-left]:before {
-  content: attr(data-title-left);
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: var(--z-popout);
-  right: calc(100% + 4px);
-}
-
-[data-title-right]:before {
-  content: attr(data-title-right);
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: var(--z-popout);
-  left: calc(100% + 4px);
-}
-
-[data-title-bottom]:before,
-[data-title-bottom-left]:before,
-[data-title-bottom-right]:before {
-  content: attr(data-title-bottom);
-  top: calc(100% + 4px);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-[data-title-bottom-left]:before {
-  content: attr(data-title-bottom-left);
-  transform: unset;
-  left: 0;
-}
-
-[data-title-bottom-right]:before {
-  content: attr(data-title-bottom-right);
-  transform: unset;
-  left: unset;
-  right: 0;
-}
-
-[data-title-top]:before,
-[data-title-top-left]:before,
-[data-title-top-right]:before {
-  content: attr(data-title-top);
-  bottom: calc(100% + 4px);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-[data-title-top-left]:before {
-  content: attr(data-title-top-left);
-  transform: unset;
-  left: 0;
-}
-
-[data-title-top-right]:before {
-  content: attr(data-title-top-right);
-  transform: unset;
-  left: unset;
-  right: 0;
-}
-
-// Hover
-
-[data-title-left]:hover:before {
-  right: calc(100% + 10px);
-}
-
-[data-title-right]:hover:before {
-  left: calc(100% + 10px);
-}
-
-[data-title-top]:hover:before,
-[data-title-top-left]:hover:before,
-[data-title-top-right]:hover:before {
-  bottom: calc(100% + 10px);
-}
-
-[data-title-bottom]:hover:before,
-[data-title-bottom-left]:hover:before,
-[data-title-bottom-right]:hover:before {
-  top: calc(100% + 10px);
-}

package/src/style/typography.scss

@@ -1,435 +0,0 @@
-// Base style definitions
-
-// Definitions should be self contained. No element should ever expect there
-// will be more. Anything like margins and actual article spacings should be
-// defined within the <article> element
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  display: block;
-  font-weight: var(--font-weight-extrabold);
-  line-height: var(--line-height-title);
-}
-
-h1 {
-  font-size: var(--font-size-xxxxl);
-}
-
-h2 {
-  font-size: var(--font-size-xxxl);
-}
-
-h3 {
-  font-size: var(--font-size-xxl);
-}
-
-h4 {
-  font-size: var(--font-size-xl);
-}
-
-h5 {
-  font-size: var(--font-size-l);
-}
-
-h6 {
-  font-size: var(--font-size-m);
-}
-
-figcaption,
-table th,
-table td,
-blockquote,
-p {
-  font-size: var(--font-size-m);
-  line-height: var(--line-height-base);
-  font-weight: var(--font-weight);
-
-  & > * {
-    line-height: inherit;
-    font-size: inherit;
-  }
-
-  a {
-    color: var(--color-text);
-    text-decoration: underline;
-    text-underline-offset: 3px;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  strong,
-  b {
-    font-weight: var(--font-weight-bold);
-  }
-
-  i {
-    font-style: italic;
-  }
-
-  u {
-    text-decoration: line-through;
-  }
-}
-
-code {
-  display: inline-block;
-  font-family: var(--global-font-mono);
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-bg-raised);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  padding: 0px 4px;
-  font-weight: var(--font-weight);
-  font-size: var(--font-size-s);
-  min-height: 22px;
-  line-height: var(--line-height-base);
-}
-
-hr {
-  border-bottom: 1px solid var(--color-border);
-}
-
-span,
-strong,
-p {
-  font-size: var(--font-size-m);
-}
-
-blockquote {
-  display: block;
-  padding-block: var(--space-s);
-  padding-left: var(--space-l);
-  border-left: 3px solid var(--color-border);
-  line-height: var(--line-height-base);
-}
-
-pre {
-  font-family: var(--global-font-mono);
-  font-size: var(--font-size-s);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height-base);
-  padding: var(--space-m);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-m);
-  white-space: pre-wrap;
-  background-color: var(--color-bg-raised);
-  z-index: var(--z-default);
-  position: relative;
-
-  code {
-    min-height: unset;
-    padding: unset;
-    border-radius: unset;
-    border: unset;
-    color: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    background-color: inherit;
-    font-family: inherit;
-    line-height: inherit;
-  }
-
-  &[data-lang]::after {
-    content: attr(data-lang);
-    font-family: var(--global-font);
-    display: block;
-    position: absolute;
-    font-weight: var(--font-weight-medium);
-    top: 6px;
-    right: 6px;
-    padding: 5px;
-    text-align: center;
-    text-transform: uppercase;
-    border-radius: var(--border-radius-s);
-    font-size: var(--font-size-xs);
-    color: var(--color-text-light);
-    border: 1px solid var(--color-border);
-    background-color: var(--color-bg-lowered);
-  }
-}
-
-table {
-  text-indent: 0;
-  border-collapse: separate;
-  overflow-x: auto;
-  max-width: 100%;
-
-  // TODO: add alternating row colors
-
-  // TODO add only separating header and body with a border, not between rows
-
-  // &.bg-dark {
-  //   background-color: var(--color-bg-lowered);
-  // }
-
-  // &.bg-light {
-  //   background-color: var(--color-bg-lighter);
-  // }
-
-  // &.no-borders {
-  //   th,
-  //   td {
-  //     border: 0 !important;
-  //   }
-  // }
-
-  thead {
-    th {
-      border-bottom: 1px solid var(--color-border);
-      border-top: 1px solid var(--color-border);
-      white-space: nowrap;
-
-      &:first-child {
-        border-top-left-radius: var(--border-radius-s);
-        border-bottom-left-radius: 0 !important;
-      }
-
-      &:last-child {
-        border-top-right-radius: var(--border-radius-s);
-        border-bottom-right-radius: 0 !important;
-      }
-    }
-  }
-
-  tbody {
-    th {
-      border-radius: 0;
-      border-bottom: 1px solid var(--color-border);
-    }
-
-    &:first-child tr:first-child {
-      td {
-        border-top: 1px solid var(--color-border);
-
-        &:first-child {
-          border-top-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-top-right-radius: var(--border-radius-s);
-        }
-      }
-    }
-  }
-
-  th,
-  td {
-    text-align: left;
-    padding-inline: var(--space-m);
-    padding-block: var(--space-s);
-    min-width: 80px;
-    font-size: var(--font-size-m);
-    line-height: var(--line-height-base);
-    font-variant-numeric: tabular-nums;
-    vertical-align: top;
-
-    &:first-child {
-      border-left: 1px solid var(--color-border);
-    }
-
-    border-right: 1px solid var(--color-border);
-  }
-
-  th {
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--font-size-xs);
-    text-transform: uppercase;
-  }
-
-  tr {
-    td {
-      border-bottom: 1px solid var(--color-border);
-      font-weight: var(--font-weight);
-    }
-
-    &:first-child {
-      th {
-        border-top: 1px solid var(--color-border);
-
-        &:first-child {
-          border-top-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-top-right-radius: var(--border-radius-s);
-        }
-      }
-    }
-
-    &:last-child {
-      th {
-        &:first-child {
-          border-bottom-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--border-radius-s);
-        }
-      }
-
-      td {
-        &:first-child {
-          border-bottom-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--border-radius-s);
-        }
-      }
-    }
-  }
-}
-
-dl {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9ch, max-content));
-  column-gap: var(--space-l);
-
-  dt,
-  dd {
-    padding-inline: var(--space-m);
-    margin-bottom: var(--space-l);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
-  dt {
-    padding-left: 0;
-    color: var(--color-text-lighter);
-    font-weight: var(--font-weight-medium);
-    font-size: var(--font-size-m);
-    grid-column-start: 1;
-  }
-
-  dd {
-    color: var(--color-text);
-    font-size: var(--font-size-m);
-  }
-}
-
-article {
-  width: 100%;
-}
-
-article,
-.typeset {
-  ol,
-  ul {
-    ol,
-    ul {
-      margin-block: var(--space-l) !important;
-    }
-
-    li {
-      margin-bottom: var(--space-m);
-      font-size: var(--font-size-m);
-      position: relative;
-      padding-left: 28px;
-
-      & > ul {
-        margin-top: 0;
-      }
-
-      &:before {
-        content: '';
-        position: absolute;
-        top: 5px;
-        left: 12px;
-      }
-
-      &:last-of-type {
-        margin: 0;
-      }
-    }
-  }
-
-  ul {
-    li {
-      &:before {
-        width: 6px;
-        height: 6px;
-        border-radius: 100%;
-        background-color: var(--color-text-lighter);
-      }
-    }
-  }
-
-  ol {
-    counter-reset: ol;
-    li {
-      counter-increment: ol;
-
-      &:before {
-        content: counter(ol) '.';
-        top: 0;
-        left: 8px;
-        text-align: left;
-        color: var(--color-text-light);
-      }
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &:not(:first-child) {
-      margin-top: var(--space-xxl);
-    }
-
-    margin-bottom: var(--space-xs);
-  }
-
-  span,
-  strong,
-  p {
-    font-size: var(--font-size-m);
-  }
-
-  dl,
-  pre,
-  img,
-  table,
-  ol,
-  ul,
-  blockquote,
-  p {
-    margin-top: var(--space-l);
-
-    // &:first-child {
-    //   margin-top: 0;
-    // }
-  }
-
-  hr {
-    margin-block: var(--space-l);
-  }
-
-  img {
-    border-radius: var(--border-radius-m);
-    overflow: hidden;
-    max-width: 100%;
-  }
-
-  figure {
-    img {
-      margin-bottom: var(--space-xs);
-    }
-
-    figcaption {
-      text-align: center;
-      font-size: var(--font-size-s);
-      color: var(--color-text-lighter);
-    }
-  }
-}

package/src/style/utils.scss

@@ -1,36 +0,0 @@
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-
-  white-space: nowrap;
-  clip-path: inset(100%);
-  clip: rect(0 0 0 0);
-  overflow: hidden;
-  outline: transparent;
-  outline-offset: 0;
-}
-
-mark {
-  background-color: var(--color-text-yellow);
-  color: var(--color-text-invert);
-  padding: 1px;
-  border-radius: 2px;
-}
-
-.counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  font-size: var(--font-size-xs);
-  color: var(--color-text);
-  background-color: var(--color-button-gray-hover);
-  font-weight: 400;
-  padding-inline: 4px;
-}

package/src/style.scss

@@ -1 +0,0 @@
-@import url(./style/core.scss);

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />