@mjsz-vbr-elements/shared 2.9.1 → 2.10.0

package/dist/css/standings-selector.css

@@ -0,0 +1,14 @@
+.mjsz-vbr-standings-selector dl {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas: 'title selector' 'subtitle subtitle';
+  }
+  .mjsz-vbr-standings-selector dt {
+    grid-area: title;
+  }
+  .mjsz-vbr-standings-selector dd {
+    grid-area: subtitle;
+  }
+  .mjsz-vbr-standings-selector .is-championship-selector {
+    grid-area: selector;
+  }

package/dist/css/table.css

@@ -1,8 +1,12 @@
+/* --vbr-widget-typography-font-size-50
+--vbr-widget-typography-font-lineheight-50 */
+
 .mjsz-vbr-table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-  .mjsz-vbr-table table,
+
+.mjsz-vbr-table table,
   .mjsz-vbr-table caption,
   .mjsz-vbr-table tbody,
   .mjsz-vbr-table tfoot,
@@ -17,12 +21,13 @@
     font: inherit;
     vertical-align: baseline;
   }
-  .mjsz-vbr-table {
+
+.mjsz-vbr-table {
   color: var(--vbr-widget-table-color);
   background-color: var(--vbr-widget-table-default-bg-color);
 }
 
-  .mjsz-vbr-table th {
+.mjsz-vbr-table th {
     width: var(--vbr-widget-table-default-column-width);
     background-color: var(--vbr-widget-table-header-bg-color);
     font-size: var(--vbr-widget-table-header-font-size);
@@ -31,85 +36,85 @@
     text-align: center;
   }
 
-  .mjsz-vbr-table th:focus-visible,
+.mjsz-vbr-table th:focus-visible,
     .mjsz-vbr-table th:hover {
       background-color: var(--vbr-widget-table-header-hover-bg-color);
       outline: none;
     }
 
-  .mjsz-vbr-table th.is-sortable {
+.mjsz-vbr-table th.is-sortable {
       position: relative;
       cursor: pointer;
     }
 
-  .mjsz-vbr-table th.is-sortable .icon-sort {
+.mjsz-vbr-table th.is-sortable .icon-sort {
         opacity: 0.5;
       }
 
-  .mjsz-vbr-table th.is-active {
+.mjsz-vbr-table th.is-active {
       background-color: var(--vbr-widget-table-table-header-active-bg-color);
       color: var(--vbr-widget-table-header-active-color);
     }
 
-  .mjsz-vbr-table th.is-active .icon-sort {
+.mjsz-vbr-table th.is-active .icon-sort {
         opacity: 1;
       }
 
-  .mjsz-vbr-table th.is-asc {
+.mjsz-vbr-table th.is-asc {
       position: relative;
     }
 
-  .mjsz-vbr-table th.is-desc {
+.mjsz-vbr-table th.is-desc {
       position: relative;
     }
 
-  .mjsz-vbr-table th.is-w-auto {
+.mjsz-vbr-table th.is-w-auto {
       width: auto;
     }
 
-  .mjsz-vbr-table th .is-icon-sort {
+.mjsz-vbr-table th .is-icon-sort {
       width: 11px;
       height: 11px;
       margin-left: 5px;
     }
 
-  .mjsz-vbr-table td {
+.mjsz-vbr-table td {
     text-align: center;
   }
 
-  .mjsz-vbr-table td.is-active {
+.mjsz-vbr-table td.is-active {
       font-weight: 700;
       color: var(--vbr-widget-table-active-color);
       background-color: var(--vbr-widget-table-active-bg-color);
     }
 
-  .mjsz-vbr-table td.is-zero {
+.mjsz-vbr-table td.is-zero {
       color: var(--vbr-widget-table-zero-color);
     }
 
-  .mjsz-vbr-table td.is-possible-empty:empty:before {
+.mjsz-vbr-table td.is-possible-empty:empty:before {
       content: '0';
       color: var(--vbr-widget-table-zero-color);
     }
 
-  .mjsz-vbr-table td .is-text-light,
+.mjsz-vbr-table td .is-text-light,
     .mjsz-vbr-table td.is-text-light {
       color: var(--vbr-widget-table-cell-light-color);
     }
 
-  .mjsz-vbr-table td .is-text-dark,
+.mjsz-vbr-table td .is-text-dark,
     .mjsz-vbr-table td.is-text-dark {
       color: var(--vbr-widget-table-cell-dark-color);
     }
 
-  .mjsz-vbr-table td .is-logo-image {
+.mjsz-vbr-table td .is-logo-image {
       display: inline-block;
       vertical-align: middle;
       width: var(--vbr-widget-table-cell-logo-size);
       height: var(--vbr-widget-table-cell-logo-size);
     }
 
-  .mjsz-vbr-table td .is-portrait-image {
+.mjsz-vbr-table td .is-portrait-image {
       display: inline-block;
       vertical-align: middle;
       width: var(--vbr-widget-table-cell-portrait-size);
@@ -121,52 +126,52 @@
       border: 1px solid var(--vbr-widget-primary-color-100);
     }
 
-  .mjsz-vbr-table td .is-portrait-image img {
+.mjsz-vbr-table td .is-portrait-image img {
         width: var(--vbr-widget-table-cell-portrait-size);
         height: auto;
       }
 
-  .mjsz-vbr-table td.is-text-bold {
+.mjsz-vbr-table td.is-text-bold {
       font-weight: 700;
     }
 
-  .mjsz-vbr-table td.is-text-italic {
+.mjsz-vbr-table td.is-text-italic {
       font-style: italic;
     }
 
-  .mjsz-vbr-table td.is-text-xl {
-      font-size: var(--vbr-widget-typography-text-xl-size);
+.mjsz-vbr-table td.is-text-xl {
+      font-size: var(--vbr-widget-typography-font-size-700);
     }
 
-  .mjsz-vbr-table td .is-text-accent {
+.mjsz-vbr-table td .is-text-accent {
       color: var(--vbr-widget-secondary-color-500);
     }
 
-  .mjsz-vbr-table td.is-w-auto {
+.mjsz-vbr-table td.is-w-auto {
       width: auto;
     }
 
-  .mjsz-vbr-table td.is-horizontal-content {
+.mjsz-vbr-table td.is-horizontal-content {
       display: inline-flex;
       align-items: center;
     }
 
-  .mjsz-vbr-table td.is-text-positive,
+.mjsz-vbr-table td.is-text-positive,
     .mjsz-vbr-table td .is-text-positive {
       color: var(--vbr-widget-live-game-color);
     }
 
-  .mjsz-vbr-table td.is-text-negative,
+.mjsz-vbr-table td.is-text-negative,
     .mjsz-vbr-table td .is-text-negative {
       color: var(--vbr-widget-danger-color-a400);
     }
 
-  .mjsz-vbr-table td svg {
+.mjsz-vbr-table td svg {
       width: 16px;
       height: 16px;
     }
 
-  .mjsz-vbr-table td button {
+.mjsz-vbr-table td button {
       padding: 3px 3px;
       line-height: 0;
       border: none;
@@ -174,49 +179,49 @@
       background-color: transparent;
     }
 
-  .mjsz-vbr-table td button:hover {
+.mjsz-vbr-table td button:hover {
         background-color: var(--vbr-widget-popover-trigger-hover-bg-color);
       }
 
-  .mjsz-vbr-table td button:active,
+.mjsz-vbr-table td button:active,
       .mjsz-vbr-table td button:focus {
         background-color: var(--vbr-widget-popover-trigger-focus-bg-color);
       }
 
-  .mjsz-vbr-table td a {
+.mjsz-vbr-table td a {
       text-decoration: none;
     }
 
-  .mjsz-vbr-table td .label {
+.mjsz-vbr-table td .label {
       padding: 3px 6px;
-      font-size: 11px;
+      font-size: var(--vbr-widget-typography-font-size-100);
       font-weight: 700;
       color: var(--vbr-widget-table-label-color);
       background-color: var(--vbr-widget-table-label-bg-color);
       border-radius: 2px;
     }
 
-  .mjsz-vbr-table td .label:not(:last-of-type) {
+.mjsz-vbr-table td .label:not(:last-of-type) {
         margin-right: 3px;
       }
 
-  .mjsz-vbr-table td a {
+.mjsz-vbr-table td a {
       color: var(--vbr-widget-link-color);
     }
 
-  .mjsz-vbr-table td a:hover {
+.mjsz-vbr-table td a:hover {
       color: var(--vbr-widget-hover-color);
     }
 
-  .mjsz-vbr-table td .is-team-name-long {
+.mjsz-vbr-table td .is-team-name-long {
       display: block;
     }
 
-  .mjsz-vbr-table td .is-team-name-short {
+.mjsz-vbr-table td .is-team-name-short {
       display: none;
     }
 
-  @container table-wrapper (max-width: 768px) {
+@container table-wrapper (max-width: 768px) {
       .mjsz-vbr-table td .is-team-name-long {
         display: none;
       }
@@ -225,52 +230,52 @@
       }
     }
 
-  .mjsz-vbr-table th,
+.mjsz-vbr-table th,
   .mjsz-vbr-table td {
     padding: 8px;
     white-space: nowrap;
     vertical-align: middle;
   }
 
-  .mjsz-vbr-table th.is-text-left, .mjsz-vbr-table td.is-text-left {
+.mjsz-vbr-table th.is-text-left, .mjsz-vbr-table td.is-text-left {
       text-align: left;
     }
 
-  .mjsz-vbr-table th.is-text-right, .mjsz-vbr-table td.is-text-right {
+.mjsz-vbr-table th.is-text-right, .mjsz-vbr-table td.is-text-right {
       text-align: right;
     }
 
-  .mjsz-vbr-table th.is-has-image, .mjsz-vbr-table td.is-has-image {
+.mjsz-vbr-table th.is-has-image, .mjsz-vbr-table td.is-has-image {
       padding: 0 2px;
     }
 
-  .mjsz-vbr-table th .is-duplicated, .mjsz-vbr-table td .is-duplicated {
+.mjsz-vbr-table th .is-duplicated, .mjsz-vbr-table td .is-duplicated {
       color: var(--vbr-widget-table-neutral-color);
     }
 
-  .mjsz-vbr-table tr.is-highlighted {
+.mjsz-vbr-table tr.is-highlighted {
       color: var(--vbr-widget-danger-color-a400);
     }
 
-  .mjsz-vbr-table tr.is-optional {
+.mjsz-vbr-table tr.is-optional {
       opacity: 0.5;
     }
 
-  .mjsz-vbr-table tr:nth-child(even) {
+.mjsz-vbr-table tr:nth-child(even) {
     background-color: var(--vbr-widget-table-stripped-bg-color);
   }
 
-  .mjsz-vbr-table tr:nth-child(even) td.is-active {
+.mjsz-vbr-table tr:nth-child(even) td.is-active {
       background-color: var(--vbr-widget-table-active-even-bg-color);
     }
 
-  .mjsz-vbr-table tr:focus-within,
+.mjsz-vbr-table tr:focus-within,
   .mjsz-vbr-table tr:hover {
     color: var(--vbr-widget-table-hover-color);
     background-color: var(--vbr-widget-table-hover-bg-color);
   }
 
-  .mjsz-vbr-table tr:focus-within td.is-active, .mjsz-vbr-table tr:hover td.is-active {
+.mjsz-vbr-table tr:focus-within td.is-active, .mjsz-vbr-table tr:hover td.is-active {
       color: var(--vbr-widget-table-active-hover-color);
       background-color: var(--vbr-widget-table-active-hover-bg-color);
     }

package/dist/css/teams.css

@@ -1,3 +1,6 @@
+/* --vbr-widget-typography-font-size-50
+--vbr-widget-typography-font-lineheight-50 */
+
 .mjsz-vbr-wrapped-grid {
   --min-width: 300px;
   --max-width: 1fr;
@@ -9,14 +12,14 @@
   text-align: center;
 }
 
-  .mjsz-vbr-wrapped-grid a {
+.mjsz-vbr-wrapped-grid a {
     display: flex;
     flex-direction: column;
     align-items: center;
     row-gap: 20px;
   }
 
-  .mjsz-vbr-wrapped-grid .is-team-logo {
+.mjsz-vbr-wrapped-grid .is-team-logo {
     display: block;
     width: 100%;
     aspect-ratio: 1;

package/dist/css/typography.css

@@ -11,28 +11,28 @@
   font-style: italic;
 }
 .is-text-xs {
-  font-size: var(--vbr-widget-typography-text-xs-size);
-  line-height: var(--vbr-widget-typography-text-xs-lineheight);
+  font-size: var(--vbr-widget-typography-font-size-200);
+  line-height: var(--vbr-widget-typography-font-lineheight-200);
 }
 .is-text-sm {
-  font-size: var(--vbr-widget-typography-text-sm-size);
-  line-height: var(--vbr-widget-typography-text-xs-lineheight);
+  font-size: var(--vbr-widget-typography-font-size-400);
+  line-height: var(--vbr-widget-typography-font-lineheight-200);
 }
 .is-text-base {
-  font-size: var(--vbr-widget-typography-text-base-size);
-  line-height: var(--vbr-widget-typography-text-base-lineheight);
+  font-size: var(--vbr-widget-typography-font-size-500);
+  line-height: var(--vbr-widget-typography-font-lineheight-500);
 }
 .is-text-lg {
-  font-size: var(--vbr-widget-typography-text-lg-size);
-  line-height: var(--vbr-widget-typography-text-lg-lineheight);
+  font-size: var(--vbr-widget-typography-font-size-600);
+  line-height: var(--vbr-widget-typography-font-lineheight-600);
 }
 .is-text-xl {
-  font-size: var(--vbr-widget-typography-text-xl-size);
-  line-height: var(--vbr-widget-typography-text-xl-lineheight);
+  font-size: var(--vbr-widget-typography-font-size-700);
+  line-height: var(--vbr-widget-typography-font-lineheight-700);
 }
 .is-text-4xl {
-  font-size: var(--vbr-widget-typography-text-4xl-size);
-  line-height: var(--vbr-widget-typography-text-4xl-lineheight);
+  font-size: var(--vbr-widget-typography-font-size-950);
+  line-height: var(--vbr-widget-typography-font-lineheight-950);
 }
 .is-uppercase {
   text-transform: uppercase;
@@ -60,24 +60,24 @@
 }
 .is-heading-1 {
   font-size: var(--vbr-widget-typography-heading-1-size);
-  line-height: var(--vbr-widget-typography-text-xl-lineheight);
-  margin-block-start: var(--vbr-widget-typography-text-xl-size);
-  margin-block-end: calc(var(--vbr-widget-typography-text-xl-size) / 2);
+  line-height: var(--vbr-widget-typography-font-lineheight-700);
+  margin-block-start: var(--vbr-widget-typography-font-size-700);
+  margin-block-end: calc(var(--vbr-widget-typography-font-size-700) / 2);
   font-weight: var(--vbr-widget-typography-heading-weight);
 }
 .is-heading-2 {
   font-size: var(--vbr-widget-typography-heading-2-size);
-  line-height: var(--vbr-widget-typography-text-lg-lineheight);
+  line-height: var(--vbr-widget-typography-font-lineheight-600);
   font-weight: var(--vbr-widget-typography-heading-weight);
-  margin-block-start: var(--vbr-widget-typography-text-lg-size);
-  margin-block-end: calc(var(--vbr-widget-typography-text-lg-size) / 2);
+  margin-block-start: var(--vbr-widget-typography-font-size-600);
+  margin-block-end: calc(var(--vbr-widget-typography-font-size-600) / 2);
 }
 .is-heading-3 {
   font-size: var(--vbr-widget-typography-heading-3-size);
-  line-height: var(--vbr-widget-typography-text-base-lineheight);
+  line-height: var(--vbr-widget-typography-font-lineheight-500);
   font-weight: var(--vbr-widget-typography-heading-weight);
-  margin-block-start: var(--vbr-widget-typography-text-base-size);
-  margin-block-end: calc(var(--vbr-widget-typography-text-base-size) / 2);
+  margin-block-start: var(--vbr-widget-typography-font-size-500);
+  margin-block-end: calc(var(--vbr-widget-typography-font-size-500) / 2);
 }
 .is-rounded {
   overflow: hidden;

package/dist/css/variables.css

@@ -1,3 +1,6 @@
+/* --vbr-widget-typography-font-size-50
+--vbr-widget-typography-font-lineheight-50 */
+
 :root,
 :host {
   font-family: 'Roboto Condensed', Avenir, Helvetica, Arial, sans-serif;
@@ -36,36 +39,40 @@
   --vbr-widget-live-game-color: #8bc34a;
   --vbr-widget-neutral-color: #ffc107;
 
-  --vbr-widget-typography-text-xxs-size: 0.6875rem; /* 11px */
-  --vbr-widget-typography-text-xxs-lineheight: 1rem; /* 16px */
-  --vbr-widget-typography-text-xs-size: 0.75rem; /* 12px */
-  --vbr-widget-typography-text-xs-lineheight: 1.25rem; /* 20px */
-  --vbr-widget-typography-text-xsm-size: 0.8125rem; /* 13px */
-  --vbr-widget-typography-text-xsm-lineheight: 1.375rem; /* 22px */
-  --vbr-widget-typography-text-sm-size: 0.875rem; /* 14px */
-  --vbr-widget-typography-text-sm-lineheight: 1.5rem; /* 24px */
-  --vbr-widget-typography-text-base-size: 1rem; /* 16px */
-  --vbr-widget-typography-text-base-lineheight: 1.75rem; /* 28px */
-  --vbr-widget-typography-text-lg-size: 1.125rem; /* 18px */
-  --vbr-widget-typography-text-lg-lineheight: 2rem; /* 32px */
-  --vbr-widget-typography-text-xl-size: 1.25rem; /* 20px */
-  --vbr-widget-typography-text-xl-lineheight: 2rem; /* 32px */
-  --vbr-widget-typography-text-2xl-size: 1.5rem; /* 24px */
-  --vbr-widget-typography-text-2xl-lineheight: 2.5rem; /* 40px */
-  --vbr-widget-typography-text-3xl-size: 1.75rem; /* 28px */
-  --vbr-widget-typography-text-3xl-lineheight: 2.5rem; /* 40px */
-  --vbr-widget-typography-text-4xl-size: 2rem; /* 32px */
-  --vbr-widget-typography-text-4xl-lineheight: 2.75rem; /* 44px */
+  --vbr-widget-typography-font-size-50: 0.6275rem; /* 10px */
+  --vbr-widget-typography-font-size-100: 0.6875rem; /* 11px */
+  --vbr-widget-typography-font-size-200: 0.75rem; /* 12px */
+  --vbr-widget-typography-font-size-300: 0.8125rem; /* 13px */
+  --vbr-widget-typography-font-size-400: 0.875rem; /* 14px */
+  --vbr-widget-typography-font-size-500: 1rem; /* 16px */
+  --vbr-widget-typography-font-size-600: 1.125rem; /* 18px */
+  --vbr-widget-typography-font-size-700: 1.25rem; /* 20px */
+  --vbr-widget-typography-font-size-800: 1.5rem; /* 24px */
+  --vbr-widget-typography-font-size-900: 1.75rem; /* 28px */
+  --vbr-widget-typography-font-size-950: 2rem; /* 32px */
+
+  --vbr-widget-typography-font-lineheight-50: calc(var(--vbr-widget-typography-font-size-50) * 1.628);
+  --vbr-widget-typography-font-lineheight-100: calc(var(--vbr-widget-typography-font-size-100) * 1.628);
+  --vbr-widget-typography-font-lineheight-200: calc(var(--vbr-widget-typography-font-size-200) * 1.628);
+  --vbr-widget-typography-font-lineheight-300: calc(var(--vbr-widget-typography-font-size-300) * 1.628);
+  --vbr-widget-typography-font-lineheight-400: calc(var(--vbr-widget-typography-font-size-400) * 1.628);
+  --vbr-widget-typography-font-lineheight-500: calc(var(--vbr-widget-typography-font-size-500) * 1.628);
+  --vbr-widget-typography-font-lineheight-600: calc(var(--vbr-widget-typography-font-size-600) * 1.628);
+  --vbr-widget-typography-font-lineheight-700: calc(var(--vbr-widget-typography-font-size-700) * 1.628);
+  --vbr-widget-typography-font-lineheight-800: calc(var(--vbr-widget-typography-font-size-800) * 1.628);
+  --vbr-widget-typography-font-lineheight-900: calc(var(--vbr-widget-typography-font-size-900) * 1.628);
+  --vbr-widget-typography-font-lineheight-950: calc(var(--vbr-widget-typography-font-size-950) * 1.628);
+
   --vbr-widget-typography-heading-weight: 500;
 
-  --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-text-2xl-size);
-  --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-text-xl-size);
-  --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-text-lg-size);
-  --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-text-base-size);
-  --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-text-sm-size);
-  --vbr-widget-typography-heading-6-size: var(--vbr-widget-typography-text-xs-size);
+  --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-font-size-800);
+  --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-font-size-700);
+  --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-font-size-600);
+  --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-font-size-500);
+  --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-font-size-400);
+  --vbr-widget-typography-heading-6-size: var(--vbr-widget-typography-font-size-200);
 
-  --vbr-widget-table-header-font-size: var(--vbr-widget-typography-text-xs-size);
+  --vbr-widget-table-header-font-size: var(--vbr-widget-typography-font-size-200);
   --vbr-widget-table-default-column-width: 30px;
   --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
   --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
@@ -102,7 +109,7 @@
   --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
   --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
 
-  --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-text-xs-size);
+  --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-font-size-200);
   --vbr-widget-tooltip-color: #ffffff;
   --vbr-widget-tooltip-bg-color: #000000;
 
@@ -122,24 +129,24 @@
   --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
 
   --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-base-input-font-size: var(--vbr-widget-typography-text-sm-size);
+  --vbr-widget-base-input-font-size: var(--vbr-widget-typography-font-size-400);
   --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
   --vbr-widget-base-input-border-radius: 3px;
 
   --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-form-label-font-size: var(--vbr-widget-typography-text-xs-size);
+  --vbr-widget-form-label-font-size: var(--vbr-widget-typography-font-size-200);
 
   --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-text-sm-size); /* 0.8125rem */
+  --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-font-size-400);
 
   --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
   --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
-  --vbr-widget-badge-font-size: 0.625rem;
-  --vbr-widget-badge-large-font-size: 0.6875rem;
-  --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-text-xsm-size);
+  --vbr-widget-badge-font-size: var(--vbr-widget-typography-font-size-50);
+  --vbr-widget-badge-large-font-size: var(--vbr-widget-typography-font-size-100);
+  --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-font-size-300);
 
   --vbr-widget-tab-btn-padding: 0.625rem 1rem;
-  --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-text-base-size);
+  --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-font-size-500);
   --vbr-widget-tab-btn-font-weight: 500;
   --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
   --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
@@ -156,7 +163,7 @@
 
   --vbr-widget-toggle-group-gap: 0.625rem;
   --vbr-widget-toggle-group-btn-padding: 3px 10px;
-  --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-text-sm-size);
+  --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-font-size-400);
   --vbr-widget-toggle-group-btn-bg-color: var(--vbr-widget-primary-color-50);
   --vbr-widget-toggle-group-btn-active-color: var(--vbr-widget-primary-color-0);
   --vbr-widget-toggle-group-btn-active-bg-color: var(--vbr-widget-live-game-color);
@@ -172,42 +179,42 @@
   --vbr-widget-gamecenter-result-size: 6rem;
   --vbr-widget-gamecenter-result-weight: 700;
   --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-teamname-size: 1.3125rem;
+  --vbr-widget-gamecenter-teamname-size: var(--vbr-widget-typography-font-size-700);
   --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
   --vbr-widget-gamecenter-teamname-weight: 700;
   --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-text-base-size);
+  --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-font-size-500);
   --vbr-widget-gamecenter-title-weight: 700;
   --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-text-base-size);
+  --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-font-size-500);
   --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-gamecenter-local-gamedate-size: 0.8125rem;
+  --vbr-widget-gamecenter-local-gamedate-size: var(--vbr-widget-typography-font-size-300);
   --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
-  --vbr-widget-gamecenter-gamestatus-size: 0.9375rem;
+  --vbr-widget-gamecenter-gamestatus-size: var(--vbr-widget-typography-font-size-400);
   --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
-  --vbr-widget-gamecenter-periodresults-size: 1.3125rem;
+  --vbr-widget-gamecenter-periodresults-size: var(--vbr-widget-typography-font-size-700);
   --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
   --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-gamecenter-period-header-size: 0.8125rem;
+  --vbr-widget-gamecenter-period-header-size: var(--vbr-widget-typography-font-size-300);
   --vbr-widget-gamecenter-period-header-weight: 500;
   --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
   --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
-  --vbr-widget-gamecenter-stats-title-size: 0.8125rem;
+  --vbr-widget-gamecenter-stats-title-size: var(--vbr-widget-typography-font-size-300);
   --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
-  --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-text-base-size);
+  --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-font-size-500);
   --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
 
   --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
   --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
   --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
 
-  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
+  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-font-size-500);
   --vbr-widget-gamecenter-events-evented-person-weight: 600;
-  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
-  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
-  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
-  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
-  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
+  --vbr-widget-gamecenter-events-assitst-list-size: var(--vbr-widget-typography-font-size-400);
+  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-font-size-200);
+  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-font-size-500);
+  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-font-size-400);
+  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-font-size-400);
   --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
 
   --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
@@ -224,21 +231,21 @@
   --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
   --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
 
-  --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
+  --vbr-widget-main-image-wrapper-horizontal-margin: 0;
 
   --vbr-widget-sticky-top-offset: 0;
 
-  --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-text-xxs-size);
+  --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-font-size-100);
   --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
   --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
-  --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-text-xsm-size);
+  --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-font-size-300);
   --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
-  --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-text-xs-size);
+  --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-font-size-200);
   --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
   --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
   --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
   --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
   --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
   --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-text-xs-size);
+  --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-font-size-200);
 }