@mjsz-vbr-elements/shared 2.32.0 → 2.33.1

package/assets/css/components/tabs.css

@@ -0,0 +1,111 @@
+@layer components.variables {
+  :where(:host) {
+    /* Tabs */
+    --mvw-tab-btn-font-size: var(--font-size-500);
+    --mvw-tab-btn-font-weight: 500;
+    --mvw-tab-btn-color: light-dark(var(--mvw-color-primary-300), var(--mvw-color-primary-500));
+    --mvw-tab-btn-border-style: solid;
+    --mvw-tab-btn-border-width: 0 0 3px 0;
+    --mvw-tab-btn-text-transform: uppercase;
+    --mvw-tab-btn-hover-color: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-300));
+    --mvw-tab-btn-hover-border-color: transparent;
+    --mvw-tab-btn-active-color: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-50));
+    --mvw-tab-btn-active-border-color: var(--mvw-border-highlighted);
+    --mvw-tab-btn-group-separator-color: var(--mvw-border-muted);
+
+    /* Toggle */
+    --mvw-toggle-group-gap: var(--size-6);
+    --mvw-toggle-group-nav-padding: 0;
+    --mvw-toggle-group-border-width: 0;
+    --mvw-toggle-group-btn-padding: var(--size-4) var(--size-8);
+    --mvw-toggle-group-btn-size: var(--font-size-400);
+    --mvw-toggle-group-btn-color: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-100));
+    --mvw-toggle-group-btn-bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-toggle-group-btn-active-color: var(--mvw-color-primary-0);
+    --mvw-toggle-group-btn-active-bg-color: var(--mvw-bg-highlighted);
+    --mvw-toggle-group-btn-radius: var(--radius-2);
+  }
+}
+
+@layer components {
+  :where(nav.tabs) {
+    & > [role='tablist'] {
+      button {
+        outline-color: transparent;
+        outline-offset: -4px;
+
+        &:focus-visible {
+          outline: 2px solid blue;
+        }
+
+        /* &[aria-selected='true'] {
+          &:focus-visible {
+            outline: 2px solid blue;
+          }
+        } */
+      }
+    }
+
+    /* Underlined */
+    &.underlined {
+      /* Tab list */
+      & > [role='tablist'] {
+        border-bottom: 1px solid var(--mvw-tab-btn-group-separator-color);
+
+        button {
+          background: transparent;
+          color: var(--mvw-tab-btn-color);
+          font-weight: var(--mvw-tab-btn-font-weight);
+          line-height: var(--font-lineheight-4);
+          padding: var(--size-8) var(--size-16);
+          text-transform: var(--mvw-tab-btn-text-transform);
+
+          &:focus-visible {
+            border-radius: 0;
+          }
+
+          &[aria-selected='true'] {
+            border-block-end: 3px solid var(--mvw-tab-btn-active-border-color);
+            color: var(--mvw-tab-btn-active-color);
+          }
+
+          &[aria-selected='false']:hover {
+            color: var(--mvw-tab-btn-hover-color);
+            /* background-color: var(--mvw-tab-btn-hover-bg-color); */
+          }
+        }
+      }
+    }
+
+    /* Filled */
+    &.filled {
+      & > [role='tablist'] {
+        display: flex;
+        gap: var(--mvw-toggle-group-gap);
+        border: var(--mvw-toggle-group-border-width) solid var(--mvw-border-muted);
+        border-radius: calc(var(--mvw-toggle-group-btn-radius) + var(--mvw-toggle-group-nav-padding));
+        overflow: hidden;
+        padding: var(--mvw-toggle-group-nav-padding);
+        width: fit-content;
+
+        button {
+          background-color: var(--mvw-toggle-group-btn-bg-color);
+          border-radius: var(--mvw-toggle-group-btn-radius);
+          font-size: var(--mvw-toggle-group-btn-size);
+          color: var(--mvw-toggle-group-btn-color);
+          /* line-height: var(--font-lineheight-4); */
+          padding: var(--mvw-toggle-group-btn-padding);
+
+          /* &:hover {
+            background-color: var(--mvw-toggle-group-btn-active-bg-color);
+          } */
+
+          &[aria-selected='true'] {
+            color: var(--mvw-toggle-group-btn-active-color);
+            background-color: var(--mvw-toggle-group-btn-active-bg-color);
+          }
+        }
+      }
+    }
+  }
+}

package/assets/css/components/timezone-selector.css

@@ -0,0 +1,19 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-timezone-selector-color: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-500));
+    --mvw-timezone-selector-font-size: var(--font-size-300);
+  }
+}
+
+@layer components {
+  :where(.timezone-selector) {
+    padding: 3px 0;
+    color: var(--mvw-timezone-selector-color);
+    font-size: var(--mvw-timezone-selector-font-size);
+    font-weight: 500;
+
+    .is-active {
+      font-weight: 700;
+    }
+  }
+}

package/assets/css/components/top-list.css

@@ -0,0 +1,97 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-top-list-bg-color: var(--mvw-color-primary-900);
+    --mvw-top-list-title-color: var(--mvw-color-primary-50);
+    --mvw-top-list-title-separator-color: var(--mvw-color-primary-700);
+    --mvw-top-list-value-color: var(--mvw-color-primary-300);
+    --mvw-top-list-player-separator-color: var(--mvw-color-primary-800);
+    --mvw-top-list-image-border-color: var(--mvw-color-primary-600);
+    --mvw-top-list-image-bg-color: var(--mvw-color-primary-800);
+    --mvw-top-list-selector-border-color: var(--mvw-color-primary-400);
+  }
+}
+
+@layer components {
+  :where(.liga-top-list) {
+    background-color: var(--mvw-top-list-bg-color);
+
+    .top-list-container {
+      padding: var(--size-16);
+
+      h2 {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        padding-block: var(--size-8);
+        font-size: var(--font-size-400);
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--mvw-top-list-title-color);
+        border-bottom: 1px solid var(--mvw-top-list-title-separator-color);
+
+        svg {
+          display: block;
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      [role='list'],
+      ul {
+        display: grid;
+        gap: var(--size-8);
+      }
+
+      [role='listitem'],
+      li {
+        display: grid;
+        grid-template-columns: 30px 1fr auto;
+        grid-template-areas: 'logo player value' 'logo team value';
+        align-items: center;
+        gap: var(--size-4) var(--size-8);
+        padding-block: var(--size-8);
+        font-size: var(--font-size-300);
+        line-height: 1;
+        border-bottom: 1px solid var(--mvw-top-list-player-separator-color);
+
+        .avatar {
+          --_width: 26px;
+        }
+
+        &.is-large {
+          font-size: var(--font-size-400);
+          font-weight: 700;
+
+          .avatar {
+            --_width: 32px;
+          }
+        }
+
+        /* :is(.is-player, .is-team) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        } */
+
+        a.is-player {
+          grid-area: player;
+        }
+        a.is-team {
+          grid-area: team;
+          font-size: var(--font-size-50);
+        }
+
+        span {
+          grid-area: value;
+          font-weight: 700;
+          color: var(--mvw-top-list-value-color);
+        }
+
+        .is-images {
+          grid-area: logo;
+          justify-self: center;
+        }
+      }
+    }
+  }
+}

package/assets/css/components/typography.css

@@ -0,0 +1,41 @@
+@layer components {
+  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+    color: var(--mvw-text-highlighted);
+    font-weight: 700;
+    text-wrap: pretty;
+  }
+
+  :where(h1, .h1) {
+    font-size: var(--font-size-h1, var(--font-size-700));
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+  }
+
+  :where(h2, .h2) {
+    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  :where(h3, .h3) {
+    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+    letter-spacing: -0.01em;
+    line-height: 1.167;
+  }
+
+  :where(h4, .h4) {
+    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+    letter-spacing: -0.01em;
+    line-height: 1.235;
+  }
+
+  :where(h5, .h5) {
+    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+    line-height: 1.334;
+  }
+
+  :where(h6, .h6) {
+    font-size: var(--font-size-h6, var(--font-size-500, 1rem));
+    line-height: 1;
+  }
+}

package/assets/css/core/normalize.css

@@ -0,0 +1,94 @@
+@layer normalize {
+  *,
+  ::before,
+  ::after {
+    /* Set box sizing instead of inheriting */
+    /* https://www.oddbird.net/2025/09/04/box-model/ */
+    box-sizing: border-box;
+  }
+
+  * {
+    scrollbar-width: thin;
+  }
+
+  :where(input, button, textarea),
+  :where(input[type='file'])::-webkit-file-upload-button {
+    color: inherit;
+    font-size: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: inline-block;
+  }
+
+  :where(img, svg, video) {
+    block-size: auto;
+    max-inline-size: 100%;
+  }
+
+  :where(img) {
+    opacity: 0;
+    transition: opacity 0.5s ease-out;
+
+    &.is-loaded {
+      opacity: 1;
+    }
+  }
+
+  :where(svg:not([width])) {
+    inline-size: var(--size-16);
+  }
+
+  :where(input, button, textarea),
+  :where(input[type='file'])::-webkit-file-upload-button {
+    color: inherit;
+    font-size: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  :where(
+    a[href],
+    area,
+    button,
+    [role='button'],
+    input,
+    label[for],
+    select,
+    summary,
+    textarea,
+    [tabindex]:not([tabindex*='-'])
+  ) {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  :where(:not(fieldset, progress, meter)) {
+    background-origin: border-box;
+    background-repeat: no-repeat;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  :where(button) {
+    appearance: button;
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  :where(dd, pre) {
+    margin: 0;
+  }
+
+  :where(ul, li) {
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(ol, ul) {
+    list-style: none;
+  }
+}

package/assets/css/core/utils.css

@@ -0,0 +1,174 @@
+@layer utils {
+  /* Font */
+  .font-bold {
+    font-weight: 700;
+  }
+
+  .italic {
+    font-style: italic;
+  }
+
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Text */
+  .text-start {
+    text-align: start;
+  }
+
+  .text-end {
+    text-align: end;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-xs {
+    font-size: var(--font-size-200);
+  }
+
+  .text-sm {
+    font-size: var(--font-size-400);
+  }
+
+  .text-xl {
+    font-size: var(--font-size-700);
+  }
+
+  .text-faded {
+    color: var(--mvw-text-faded);
+  }
+
+  .text-dimmed {
+    color: var(--mvw-text-dimmed);
+  }
+
+  .text-muted {
+    color: var(--mvw-text-muted);
+  }
+
+  .text-toned {
+    color: var(--mvw-text-toned);
+  }
+
+  .text-default {
+    color: var(--mvw-text-default);
+  }
+
+  .text-highlighted {
+    color: var(--mvw-text-highlighted);
+  }
+
+  /* Size */
+  .w-auto {
+    width: auto;
+  }
+
+  .mx-sm {
+    margin-inline: var(--size-8);
+  }
+  .mb-sm {
+    margin-block-end: var(--size-8);
+  }
+  .mb-md {
+    margin-block-end: var(--size-16);
+  }
+  .mb-xl {
+    margin-block-end: calc(var(--size-16) * 2);
+  }
+  .mt-md {
+    margin-block-start: var(--size-16);
+  }
+  .mt-lg {
+    margin-block-start: var(--size-24);
+  }
+  .mt-xl {
+    margin-block-start: calc(var(--size-16) * 2);
+  }
+
+  .p-sm {
+    padding-block: var(--size-8);
+  }
+
+  .py-md {
+    padding-block: var(--size-16);
+  }
+
+  /* Display */
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .rounded {
+    border-radius: 1e5px;
+  }
+
+  .sticky {
+    position: sticky;
+    top: var(--mvw-sticky-top-offset, 0);
+    z-index: 10;
+  }
+
+  .blured-bg {
+    backdrop-filter: blur(10px);
+  }
+
+  /* Layout */
+  .grid-container {
+    --min-width: 230px;
+    --max-width: 1fr;
+    --gap: var(--size-16);
+    --align-items: center;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), var(--max-width)));
+    align-items: var(--align-items);
+    gap: var(--gap);
+  }
+
+  .flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-16);
+  }
+
+  .responsive-team-name {
+    container-type: inline-size;
+    container-name: team-name;
+
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .team-name-short {
+        display: none;
+      }
+
+      @container team-name (max-width: 200px) {
+        .team-name-long {
+          display: none;
+        }
+        .team-name-short {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

package/assets/css/core.css

@@ -0,0 +1,22 @@
+@layer normalize, theme, components.variables, components, utils;
+
+/* Base */
+@import 'base/color.primary.css';
+@import 'base/color.secondary.css';
+@import 'base/borders.css';
+@import 'base/font.css';
+@import 'base/sizes.css';
+@import 'base/shadow.css';
+@import 'base/ease.css';
+
+/* Normalize */
+@import 'core/normalize.css';
+
+/* Theme */
+@import 'theme.css';
+
+/* Common Components */
+@import 'components/loading-indicator.css';
+
+/* Utils */
+@import 'core/utils.css';

package/assets/css/theme.css

@@ -0,0 +1,63 @@
+@layer theme {
+  [data-theme='light'],
+  :host-context(.light) {
+    color-scheme: only light;
+  }
+
+  [data-theme='dark'],
+  :host-context(.dark) {
+    color-scheme: only dark;
+  }
+
+  :root,
+  :host {
+    font-family: var(--mvw-font, inherit);
+
+    /* Special Colors */
+    --mvw-color-live: #8bc34a;
+    --mvw-color-error: #fb2c36;
+    --mvw-color-warning: #ffc107;
+    --mvw-color-info: #2870ed;
+    --mvw-color-team: #ff6129;
+
+    /* Link */
+    --mvw-link-color: light-dark(var(--mvw-color-secondary-700), var(--mvw-color-secondary-400));
+    --mvw-link-hover-color: light-dark(var(--mvw-color-secondary-900), var(--mvw-color-secondary-200));
+
+    /* Text */
+    --mvw-text-pale: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-700));
+    --mvw-text-faded: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-600));
+    --mvw-text-dimmed: light-dark(var(--mvw-color-primary-400), var(--mvw-color-primary-500));
+    --mvw-text-muted: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-400));
+    --mvw-text-toned: light-dark(var(--mvw-color-primary-600), var(--mvw-color-primary-300));
+    --mvw-text-default: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-200));
+    --mvw-text-highlighted: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-50));
+    --mvw-text-inverted: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
+
+    /* Background */
+    --mvw-bg-default: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
+    --mvw-bg-muted: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-bg-elevated: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
+    --mvw-bg-accented: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-700));
+    --mvw-bg-highlighted: var(--mvw-color-secondary-500);
+    --mvw-bg-inverted: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-50));
+
+    /* Border */
+    --mvw-border-faded: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
+    --mvw-border-muted: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-700));
+    --mvw-border-highlighted: var(--mvw-color-secondary-500);
+  }
+
+  :where(a[href]) {
+    color: var(--mvw-link-color);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--mvw-link-hover-color);
+    }
+
+    &:visited {
+      color: var(--mvw-link-color);
+    }
+  }
+}