@cfx-dev/ui-components 0.0.5

package/dist/styles-scss/_ui.scss

@@ -0,0 +1,195 @@
+@use "sass:math";
+@use "colors";
+
+@mixin def($var, $value) {
+  --#{$var}: #{$value};
+}
+@function use($var, $default: initial) {
+  @return var(--#{$var}, $default);
+}
+
+@function color($name, $luminance: 'pure', $alpha: 1.0) {
+  @if $luminance == 'pure' {
+    @return rgba(var(--color-#{$name}), #{$alpha});
+  }
+
+  @return rgba(var(--color-#{$name}-#{$luminance}), #{$alpha});
+}
+
+@function offset($size: 'normal') {
+  @return var(--offset-#{$size});
+}
+
+@function q($multiplier: 1) {
+  @if $multiplier == 1 {
+      @return var(--quant);
+  }
+
+  @return calc(var(--quant) * #{$multiplier});
+}
+
+@function control-height($size: 'normal') {
+  @return var(--control-height-#{$size});
+}
+
+@function font-size($size: 'normal') {
+  @return var(--font-size-#{$size});
+}
+
+@function font-weight($weight: 'normal') {
+  @return var(--font-weight-#{$weight});
+}
+
+@function negative($cssValue) {
+  @return calc(-1 * #{$cssValue});
+}
+
+@function border-radius($size: 'normal') {
+  @return var(--border-radius-#{$size});
+}
+
+@function viewport-width($multiplier: 1.0) {
+  @return calc((var(--width) - var(--offset-safezone) * 2) * #{$multiplier});
+}
+@function viewport-height($multiplier: 1.0) {
+  @return calc((var(--height) - var(--offset-safezone) * 2) * #{$multiplier});
+}
+
+@mixin define-color($name, $color, $bg, $fg) {
+  .cfx-color-#{$name} { color: $color }
+
+  --color-#{$name}: #{colors.color-triplet($color)};
+  --color-#{$name}-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 1, 7))};
+  --color-#{$name}-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 2, 7))};
+  --color-#{$name}-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 3, 7))};
+  --color-#{$name}-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 4, 7))};
+  --color-#{$name}-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 5, 7))};
+  --color-#{$name}-500: #{colors.color-triplet($color)};
+  --color-#{$name}-600: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 1, 7))};
+  --color-#{$name}-700: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 2, 7))};
+  --color-#{$name}-800: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 3, 7))};
+  --color-#{$name}-900: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 4, 7))};
+  --color-#{$name}-950: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 5, 7))};
+}
+@mixin define-main-color($bg, $fg) {
+  --color-main: #{colors.color-triplet($bg)};
+  --color-main-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 1,  12))};
+  --color-main-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 2,  12))};
+  --color-main-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 3,  12))};
+  --color-main-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 4,  12))};
+  --color-main-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 5,  12))};
+  --color-main-500: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 6,  12))};
+  --color-main-600: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 7,  12))};
+  --color-main-700: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 8,  12))};
+  --color-main-800: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 9,  12))};
+  --color-main-900: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 10, 12))};
+  --color-main-950: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 11, 12))};
+}
+@mixin define-main-colors($bg, $fg, $overrides: ()) {
+  $colors: map-merge((
+    'primary': #f50551,
+    'success': #01a370,
+    'warning': #ffae00,
+    'error': #ff2600,
+    'teal': #007892,
+    'aurum': #aa6f0d,
+    'silver': #a5a5a5
+  ), $overrides);
+
+  @include define-main-color($bg, $fg);
+
+  @each $colorName, $colorValue in $colors {
+    @include define-color($colorName, $colorValue, $bg, $fg);
+  }
+}
+@mixin define-color-token($name, $color) {
+  --color-#{$name}: #{$color};
+}
+@function color-token($name, ) {
+  @return var(--color-#{$name});
+}
+
+
+@mixin border-radius($size: 'normal') {
+  border-radius: var(--border-radius-#{$size});
+}
+
+@mixin font-size($size: 'normal') {
+  font-size: var(--font-size-#{$size});
+}
+@mixin font-family($family: 'primary') {
+  font-family: var(--font-family-#{$family});
+}
+@mixin font-weight($weight: 'normal') {
+  font-weight: var(--font-weight-#{$weight});
+}
+@mixin font-color($colorToken) {
+  color: color-token($colorToken);
+}
+
+@mixin animated($props: 'all', $subClass: '&') {
+  #{$subClass} {
+    transition: #{$props} .2s ease;
+  }
+
+  &:hover {
+    #{$subClass} {
+      transition: none;
+    }
+  }
+}
+
+@mixin fake-backdrop-blur($topLayer: false, $topLayerBlend: false, $topLayerSize: false, $topLayerAttachement: false) {
+  --_backdrop-color: var(--backdrop-color, transparent);
+  --_backdrop-image-blur: var(--backdrop-image-blur, url(assets/images/bg2-blur.png));
+
+  @if not $topLayer {
+    $topLayer: linear-gradient(use('_backdrop-color'), use('_backdrop-color'));
+  }
+
+  @if not $topLayerBlend {
+    $topLayerBlend: normal;
+  }
+
+  @if not $topLayerSize {
+    $topLayerSize: cover;
+  }
+
+  @if not $topLayerAttachement {
+    $topLayerAttachement: scroll;
+  }
+
+  background-color: use('_backdrop-color');
+  background-image:
+    $topLayer,
+    linear-gradient(color-token('backdrop-shader'), color-token('backdrop-shader')),
+    use('_backdrop-image-blur'),
+    use('_backdrop-image-blur');
+  background-blend-mode: $topLayerBlend, normal, overlay;
+  background-size: $topLayerSize, cover, cover, cover;
+  background-attachment: $topLayerAttachement, scroll, fixed, fixed;
+}
+
+@mixin offset-classes($prefix: 'offset', $property: 'gap') {
+  &.#{$prefix}-none {
+    #{$property}: 0;
+  }
+  &.#{$prefix}-thin {
+    #{$property}: 2px;
+  }
+  &.#{$prefix}-xsmall {
+    #{$property}: offset('xsmall');
+  }
+  &.#{$prefix}-small {
+    #{$property}: offset('small');
+  }
+  &.#{$prefix}-normal {
+    #{$property}: offset('normal');
+  }
+  &.#{$prefix}-large {
+    #{$property}: offset('large');
+  }
+  &.#{$prefix}-xlarge {
+    #{$property}: offset('xlarge');
+  }
+}

package/dist/styles-scss/global.scss

@@ -0,0 +1,71 @@
+@import "tokens";
+
+body {
+  @include color-tokens;
+
+  @include ui.def('control-height-xxsmall', ui.q(1.5));
+  @include ui.def('control-height-xsmall', ui.q(3));
+  @include ui.def('control-height-small', ui.q(4));
+  @include ui.def('control-height-normal', ui.q(6));
+  @include ui.def('control-height-large', ui.q(7));
+
+  @include ui.def('offset-none', 0px);
+  @include ui.def('offset-hairthin', 1px);
+  @include ui.def('offset-thin', 2px);
+  @include ui.def('offset-xsmall', ui.q(.5));
+  @include ui.def('offset-small', ui.q(1));
+  @include ui.def('offset-normal', ui.q(2));
+  @include ui.def('offset-large', ui.q(4));
+  @include ui.def('offset-xlarge', ui.q(6));
+
+  @include ui.def('offset-safezone', ui.q(8));
+
+	@include ui.def('font-size-xsmall', 0.7rem);
+	@include ui.def('font-size-small', 0.8rem);
+	@include ui.def('font-size-normal', 1rem);
+	@include ui.def('font-size-large', 1.25rem);
+	@include ui.def('font-size-xlarge', 1.5rem);
+	@include ui.def('font-size-xxlarge', 1.75rem);
+	@include ui.def('font-size-xxxlarge', 2rem);
+
+  @include ui.def('font-weight-thin', 100);
+  @include ui.def('font-weight-normal', 300);
+  @include ui.def('font-weight-bold', 400);
+  @include ui.def('font-weight-bolder', 600);
+  @include ui.def('font-weight-boldest', 900);
+
+  @include ui.def('font-family-primary', 'RubikVariable');
+  @include ui.def('font-family-secondary', 'MontserratVariable');
+  @include ui.def('font-family-monospace', 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace');
+
+  @include ui.def('border-radius-none', 0);
+  @include ui.def('border-radius-xxsmall', ui.q(.25));
+  @include ui.def('border-radius-xsmall', ui.q(.5));
+  @include ui.def('border-radius-small', ui.q(.75));
+  @include ui.def('border-radius-normal', ui.q(1.5));
+
+  @include ui.font-color('text');
+  @include ui.font-family('primary');
+  @include ui.font-weight('normal');
+}
+
+// Utilities
+.util-full-height {
+  height: 100%;
+}
+.util-full-width {
+  width: 100%;
+}
+.util-z-index-9000 {
+  z-index: 9000;
+}
+.util-text-selectable,
+.util-text-selectable * {
+  user-select: text !important;
+}
+.util-flex-grow {
+  flex-grow: 1;
+}
+.util-flex-no-shrink {
+  flex-shrink: 0;
+}

package/dist/styles-scss/themes/dark.scss

@@ -0,0 +1,24 @@
+@use "ui";
+
+$fg: #fffff0;
+$bg: #161923;
+
+.cfxui-theme-dark {
+  @include ui.define-main-colors($bg, $fg, (
+    'primary': darken(#f50551, 10%)
+  ));
+
+  .color-1 { color: lighten(#F44336, 30%);	}
+	.color-2 { color: lighten(#4CAF50, 30%);	}
+	.color-3 { color: lighten(#FFEB3B, 30%);	}
+	.color-4 { color: lighten(#42A5F5, 30%);	}
+	.color-5 { color: lighten(#03A9F4, 30%);	}
+	.color-6 { color: lighten(#9C27B0, 30%);	}
+	.color-8 { color: lighten(#FF5722, 30%);	}
+	.color-9 { color: lighten(#9E9E9E, 30%);	}
+
+  // Invert black indicators for date/time inputs
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

package/dist/styles-scss/themes/light.scss

@@ -0,0 +1,54 @@
+@use "ui";
+
+$fg: #161923;
+$bg: #ffffff;
+
+.cfxui-theme-light {
+  @include ui.define-main-colors($bg, $fg);
+
+  // Asset overrides
+  @include ui.def('checkered-pattern', url(assets/images/checkered_light.svg));
+
+  // Color overrides
+  @include ui.def               ('text-opacity-10',                .20);
+  @include ui.define-color-token('text-a10', ui.color('main', 950, .20));
+  @include ui.def               ('text-opacity-25',                .35);
+  @include ui.define-color-token('text-a25', ui.color('main', 950, .35));
+  @include ui.def               ('text-opacity-50',                .60);
+  @include ui.define-color-token('text-a50', ui.color('main', 950, .60));
+  @include ui.def               ('text-opacity-75',                .85);
+  @include ui.define-color-token('text-a75', ui.color('main', 950, .85));
+
+  @include ui.define-color-token('text-warning', ui.color('warning', 700));
+
+  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .3));
+  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .3));
+
+  @include ui.define-color-token('backdrop', ui.color('main', 50, .75));
+  @include ui.define-color-token('backdrop-shader', ui.color('main', 100, .75));
+
+  @include ui.define-color-token('button-primary-text', ui.color('main'));
+  @include ui.define-color-token('button-primary-hover-text', ui.color('main'));
+  @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
+
+  @include ui.define-color-token('premium-badge-text', ui.color('main'));
+  @include ui.define-color-token('premium-badge-background', ui.color('main', 950));
+
+  @include ui.define-color-token('loaf-text', ui.color('main', 950, .75));
+  @include ui.define-color-token('loaf-background', ui.color('main', 950, .075));
+
+
+  .color-1 { color: darken(#F44336, 30%);	}
+	.color-2 { color: darken(#4CAF50, 30%);	}
+	.color-3 { color: darken(#FFEB3B, 30%);	}
+	.color-4 { color: darken(#42A5F5, 30%);	}
+	.color-5 { color: darken(#03A9F4, 30%);	}
+	.color-6 { color: darken(#9C27B0, 30%);	}
+	.color-8 { color: darken(#FF5722, 30%);	}
+	.color-9 { color: darken(#9E9E9E, 30%);	}
+
+  // Too thin otherwise
+  --font-weight-normal: 400;
+  --font-weight-bold: 500;
+  --font-weight-bolder: 600;
+}

package/dist/styles-scss/themes.scss

@@ -0,0 +1,2 @@
+@import "themes/dark.scss";
+@import "themes/light.scss";

package/dist/styles-scss/tokens.scss

@@ -0,0 +1,274 @@
+/**
+ * Look for usages by searching for `ui.color-token('name')`
+ */
+@mixin color-tokens() {
+  // Asset images
+  @include ui.def('asset-image-bgpat', url(assets/images/bgpat.png));
+
+  @include ui.def('checkered-pattern', url(assets/images/checkered_dark.svg));
+  // /Asset images
+
+
+  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
+  @include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
+
+  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
+  @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
+
+
+  @include ui.define-color-token('text',     ui.color('main', 950     ));
+  @include ui.def               ('text-opacity-10',                .10);
+  @include ui.define-color-token('text-a10', ui.color('main', 950, .10));
+  @include ui.def               ('text-opacity-25',                .25);
+  @include ui.define-color-token('text-a25', ui.color('main', 950, .25));
+  @include ui.def               ('text-opacity-50',                .50);
+  @include ui.define-color-token('text-a50', ui.color('main', 950, .50));
+  @include ui.def               ('text-opacity-75',                .75);
+  @include ui.define-color-token('text-a75', ui.color('main', 950, .75));
+
+  @include ui.define-color-token('text-warning', ui.color('warning'));
+
+  @include ui.define-color-token('link-hover-decoration', ui.color('main', 950));
+
+  @include ui.define-color-token('li-marker', ui.color('main', 950, .75));
+
+  @include ui.define-color-token('kbd-border', ui.color('main', 300));
+  @include ui.define-color-token('kbd-background', ui.color('main', 200));
+
+  @include ui.define-color-token('scrollbar', ui.color('main', 950, .1));
+  @include ui.define-color-token('scrollbar-hover', ui.color('main', 950, .25));
+  @include ui.define-color-token('scrollbar-active', ui.color('main', 950, .5));
+
+  @include ui.define-color-token('backdrop', ui.color('main', $alpha: .75));
+  @include ui.define-color-token('backdrop-100', ui.color('main', $alpha: .25));
+  @include ui.define-color-token('backdrop-200', ui.color('main', $alpha: .5));
+  @include ui.define-color-token('backdrop-300', ui.color('main', $alpha: .75));
+
+  @include ui.define-color-token('backdrop-shader', ui.color('main', $alpha: .75));
+
+
+  // COMPONENTS
+  @include ui.define-color-token('avatar-background', ui.color('main'));
+
+
+  @include ui.define-color-token('badge-text', ui.color('main', 900));
+  @include ui.define-color-token('badge-border', ui.color('main', 300));
+  @include ui.define-color-token('badge-background', ui.color('main', 200));
+
+  @include ui.define-color-token('badge-primary-border', ui.color('primary', 50));
+  @include ui.define-color-token('badge-primary-background', ui.color('primary'));
+
+
+  @include ui.define-color-token('button-focus-outline', ui.color('primary', 'pure', .5));
+
+  @include ui.define-color-token('button-text', ui.color('main', 950));
+  @include ui.define-color-token('button-border', transparent);
+  @include ui.define-color-token('button-background', ui.color('main', 950, .15));
+  @include ui.define-color-token('button-hover-border', ui.color('main', 950, .05));
+  @include ui.define-color-token('button-hover-background', ui.color('main', 950, .1));
+  @include ui.define-color-token('button-active-border', ui.color('main', 950, .15));
+  @include ui.define-color-token('button-active-background', transparent);
+
+  @include ui.define-color-token('button-primary-text', ui.color('main', 950));
+  @include ui.define-color-token('button-primary-border', ui.color('primary'));
+  @include ui.define-color-token('button-primary-background', ui.color('primary'));
+  @include ui.define-color-token('button-primary-hover-text', ui.color('main', 950));
+  @include ui.define-color-token('button-primary-hover-border', ui.color('primary'));
+  @include ui.define-color-token('button-primary-hover-background', ui.color('primary', 400));
+  @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
+  @include ui.define-color-token('button-primary-active-border', ui.color('primary'));
+  @include ui.define-color-token('button-primary-active-background', transparent);
+
+
+  @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', 'pure', .5));
+  @include ui.define-color-token('checkbox-indicator', ui.color('main', 800));
+
+  @include ui.define-color-token('checkbox-text', ui.color('main', 950));
+  @include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
+  @include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
+  @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
+
+
+  @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
+  @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
+  @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, .75));
+  @include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
+
+
+  @include ui.define-color-token('indicator-bright', ui.color('primary'));
+  @include ui.define-color-token('indicator-dim', transparent);
+
+
+  @include ui.define-color-token('info-panel-border', ui.color('main', 950, .1));
+  @include ui.define-color-token('info-panel-background', ui.color('main', 950, .1));
+
+  @include ui.define-color-token('info-panel-error-border', ui.color('error', $alpha: .8));
+  @include ui.define-color-token('info-panel-error-background', ui.color('error', $alpha: .4));
+
+  @include ui.define-color-token('info-panel-success-border', ui.color('success', $alpha: .8));
+  @include ui.define-color-token('info-panel-success-background', ui.color('success', $alpha: .4));
+
+  @include ui.define-color-token('info-panel-warning-border', ui.color('warning', $alpha: .8));
+  @include ui.define-color-token('info-panel-warning-background', ui.color('warning', $alpha: .4));
+
+
+  @include ui.define-color-token('input-placeholder-text', ui.color('main', 950, .5));
+  @include ui.define-color-token('input-description-text', ui.color('main', 950, .5));
+  @include ui.define-color-token('input-label-text', ui.color('main', 950));
+
+  @include ui.define-color-token('input-text', ui.color('main', 950));
+  @include ui.define-color-token('input-background', ui.color('main', 950, .1));
+
+  @include ui.define-color-token('input-border', ui.color('main', 950, .25));
+  @include ui.define-color-token('input-hover-border', ui.color('main', 950, .5));
+  @include ui.define-color-token('input-focus-border', ui.color('primary'));
+
+  @include ui.define-color-token('input-disabled-border', ui.color('main', 950, .05));
+  @include ui.define-color-token('input-disabled-label-text', ui.color('main', 950, .5));
+
+
+  @include ui.define-color-token('island-border', ui.color('main', 50, .25));
+  @include ui.define-color-token('island-blur-background', ui.color('main', 50, .75));
+  @include ui.define-color-token('island-unblur-background', ui.color('main', 50, .95));
+
+
+  @include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
+  @include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
+  @include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
+
+  @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
+  @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
+  @include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
+
+  @include ui.define-color-token('loaf-error-text', ui.color('error', 500));
+  @include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
+  @include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
+
+
+  @include ui.define-color-token('modal-border', ui.color('main', 950, .15));
+  @include ui.define-color-token('modal-background', ui.color('main'));
+  @include ui.define-color-token('modal-footer-background', ui.color('main', 50, .95));
+
+
+  @include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
+  @include ui.define-color-token('navlist-item-background', transparent);
+  @include ui.define-color-token('navlist-item-active-border', transparent);
+  @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
+  @include ui.define-color-token('navlist-item-hover-border', transparent);
+  @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
+
+
+  @include ui.define-color-token('overlay-backdrop-background', ui.color('main', 50, .95));
+
+
+  @include ui.define-color-token('popover-background', ui.color('main', 50));
+
+
+  @include ui.define-color-token('premium-badge-text', ui.color('main', 'pure'));
+  @include ui.define-color-token('premium-badge-background', ui.color('main'));
+
+  @include ui.define-color-token('premium-badge-pt-gradient-1', darken(#f50551, 15%));
+  @include ui.define-color-token('premium-badge-pt-gradient-2', #f50551);
+
+  @include ui.define-color-token('premium-badge-au-gradient-1', ui.color('aurum', 200));
+  @include ui.define-color-token('premium-badge-au-gradient-2', ui.color('aurum', 'pure', 1));
+
+  @include ui.define-color-token('premium-badge-ag-gradient-1', ui.color('silver', 200));
+  @include ui.define-color-token('premium-badge-ag-gradient-2', ui.color('silver', 'pure', 1));
+
+
+  @include ui.define-color-token('select-option-background', ui.color('main'));
+  @include ui.define-color-token('select-text', ui.color('main', 950));
+  @include ui.define-color-token('select-background', ui.color('main', 950, .1));
+  @include ui.define-color-token('select-border', ui.color('main', 950, .25));
+
+  @include ui.define-color-token('select-hover-border', ui.color('main', 950, .5));
+  @include ui.define-color-token('select-focus-border', ui.color('primary'));
+
+
+  @include ui.define-color-token('separator-text', ui.color('main', 950, .25));
+  @include ui.define-color-token('separator-background', ui.color('main', 950, .1));
+
+
+  @include ui.define-color-token('switch-description-text', ui.color('main', 950, .5));
+  @include ui.define-color-token('switch-border', ui.color('main', 950, .25));
+  @include ui.define-color-token('switch-background', ui.color('main', 950, .1));
+
+  @include ui.define-color-token('switch-hover-background', ui.color('main', 200));
+
+  @include ui.define-color-token('switch-active-text', ui.color('main'));
+  @include ui.define-color-token('switch-active-background', ui.color('main', 950, .75));
+
+
+  @include ui.define-color-token('title-text', ui.color('main'));
+  @include ui.define-color-token('title-background', ui.color('main', 950));
+
+
+  @include ui.define-color-token('server-icon-loader-background', ui.color('main', $alpha: .5));
+
+
+  @include ui.define-color-token('server-banner-background-from', ui.color('main', $alpha: .75));
+  @include ui.define-color-token('server-banner-background-to', ui.color('main', $alpha: .95));
+
+
+  @include ui.define-color-token('server-review-background', ui.color('main', 'pure', .5));
+  @include ui.define-color-token('server-review-form-background', ui.color('main', 100, .5));
+
+
+  @include ui.define-color-token('server-item-border', ui.color('main', 100, 1));
+  @include ui.define-color-token('server-item-description-text', ui.color('main', 950, .5));
+  @include ui.define-color-token('server-item-players-text', ui.color('main', 950, .5));
+
+  @include ui.define-color-token('server-item-standalone-background', ui.color('main', 'pure'));
+  @include ui.define-color-token('server-item-standalone-hover-background', ui.color('main', 50));
+
+  @include ui.define-color-token('server-item-background', ui.color('main', 'pure', .5));
+  @include ui.define-color-token('server-item-hover-background', ui.color('main', 50, .5));
+
+  @include ui.define-color-token('server-item-platinum-background', ui.color('primary', 'pure', .1));
+
+  @include ui.define-color-token('server-item-density-background-from', ui.color('success'));
+  @include ui.define-color-token('server-item-density-background-via', ui.color('warning'));
+  @include ui.define-color-token('server-item-density-background-to', ui.color('error'));
+
+
+  @include ui.define-color-token('server-filters-sort-item-background', transparent);
+  @include ui.define-color-token('server-filters-sort-item-hover-background', ui.color('main', 'pure', 1));
+  @include ui.define-color-token('server-filters-sort-item-active-background', ui.color('main', 'pure', .5));
+
+  @include ui.define-color-token('server-filters-faucet-background', transparent);
+  @include ui.define-color-token('server-filters-faucet-hover-background', ui.color('main', 200, .5));
+  @include ui.define-color-token('server-filters-faucet-inclusive-background', ui.color('success', $alpha: .5));
+  @include ui.define-color-token('server-filters-faucet-inclusive-hover-background', ui.color('success', $alpha: .4));
+  @include ui.define-color-token('server-filters-faucet-exclusive-background', ui.color('error', $alpha: .5));
+  @include ui.define-color-token('server-filters-faucet-exclusive-hover-background', ui.color('error', $alpha: .4));
+
+
+  @include ui.define-color-token('platform-status-background', ui.color('bg', 'pure', .5));
+  @include ui.define-color-token('platform-status-border', transparent);
+  @include ui.define-color-token('platform-status-shadow', transparent);
+  @include ui.define-color-token('platform-status-warning-border', ui.color('warning'));
+  @include ui.define-color-token('platform-status-warning-shadow', ui.color('warning', 'pure', .25));
+  @include ui.define-color-token('platform-status-error-border', ui.color('error'));
+  @include ui.define-color-token('platform-status-error-shadow', ui.color('primary', 'pure', .5));
+
+
+  @include ui.define-color-token('interactive-list-background', ui.color('main', 100, 1));
+  @include ui.define-color-token('interactive-list-item-background', transparent);
+  @include ui.define-color-token('interactive-list-item-hover-background', ui.color('main', 200, 1));
+  @include ui.define-color-token('interactive-list-item-active-background', ui.color('main', 200, .5));
+
+
+  @include ui.define-color-token('carousel-selector-item-progress-background', ui.color('main', 500, .25));
+
+
+  @include ui.define-color-token('outlined-hover-border', ui.color('main', 500, .25));
+
+
+  @include ui.define-color-token('tabular-item-decorator-active-background', ui.color('main', 950, .5));
+  @include ui.define-color-token('tabular-item-decorator-hover-background', ui.color('main', 950, .1));
+
+
+  @include ui.define-color-token('play-button-background-1', rgba(255, 143, 178, 1));
+  @include ui.define-color-token('play-button-background-2', rgba(170, 49, 146, 1));
+}

package/dist/tslib.es6-Dd_EkEfR.js

@@ -0,0 +1,48 @@
+var c = function(n, t) {
+  return c = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(e, r) {
+    e.__proto__ = r;
+  } || function(e, r) {
+    for (var o in r)
+      Object.prototype.hasOwnProperty.call(r, o) && (e[o] = r[o]);
+  }, c(n, t);
+};
+function s(n, t) {
+  if (typeof t != "function" && t !== null)
+    throw new TypeError("Class extends value " + String(t) + " is not a constructor or null");
+  c(n, t);
+  function e() {
+    this.constructor = n;
+  }
+  n.prototype = t === null ? Object.create(t) : (e.prototype = t.prototype, new e());
+}
+var p = function() {
+  return p = Object.assign || function(t) {
+    for (var e, r = 1, o = arguments.length; r < o; r++) {
+      e = arguments[r];
+      for (var a in e)
+        Object.prototype.hasOwnProperty.call(e, a) && (t[a] = e[a]);
+    }
+    return t;
+  }, p.apply(this, arguments);
+};
+function u(n, t) {
+  var e = {};
+  for (var r in n)
+    Object.prototype.hasOwnProperty.call(n, r) && t.indexOf(r) < 0 && (e[r] = n[r]);
+  if (n != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var o = 0, r = Object.getOwnPropertySymbols(n); o < r.length; o++)
+      t.indexOf(r[o]) < 0 && Object.prototype.propertyIsEnumerable.call(n, r[o]) && (e[r[o]] = n[r[o]]);
+  return e;
+}
+function l(n, t, e) {
+  if (e || arguments.length === 2)
+    for (var r = 0, o = t.length, a; r < o; r++)
+      (a || !(r in t)) && (a || (a = Array.prototype.slice.call(t, 0, r)), a[r] = t[r]);
+  return n.concat(a || Array.prototype.slice.call(t));
+}
+export {
+  p as _,
+  s as a,
+  u as b,
+  l as c
+};