@cfx-dev/ui-components 1.0.0 → 2.0.0

package/dist/styles-scss/tokens.scss

@@ -1,87 +1,297 @@
-/**
- * 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));
+@use "sass:map";
+@use "ui";
+
+@mixin border-radius-tokens() {
+  @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.def('border-radius-pill', 9999px);
+}
 
-  @include ui.def('checkered-pattern', url(assets/images/checkered_dark.svg));
-  // /Asset images
+@mixin text-tokens() {
+	@include ui.define-font-size('xxsmall',   ui.q(1.875),  1.5);
+	@include ui.define-font-size('xsmall',    ui.q(2.25),   1.5);
+  @include ui.define-font-size('small',     ui.q(2.5),    1.5);
 
+  // normal is mirroring small, becouse it's the default size
+  @include ui.define-font-size('normal',    ui.q(2.5),    1.5);
 
-  @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-font-size('medium',    ui.q(3.125),  1.3);
+  @include ui.define-font-size('large',     ui.q(3.75),   1.3);
+  @include ui.define-font-size('xlarge',    ui.q(5),      1.3);
+  @include ui.define-font-size('xxlarge',   ui.q(6.25),   1.3);
+  @include ui.define-font-size('xxxlarge',  ui.q(8.75),   1.15);
 
-  @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.def('font-weight-thin',     100);
+  @include ui.def('font-weight-small',    300);
+  @include ui.def('font-weight-normal',   400);
+  @include ui.def('font-weight-bold',     700);
+  @include ui.def('font-weight-bolder',   800);
+  @include ui.def('font-weight-boldest',  900);
+
+  @include ui.def('letter-spacing-normal',   -0.025em);
+  @include ui.def('letter-spacing-large',    0);
 
+  @include ui.def('font-family-primary', 'HelveticaNowText');
+  @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
 
-  @include ui.define-color-token('text',     ui.color('main', 950     ));
+  @include ui.define-color-token('text',     ui.color('primary', 'pure'     ));
   @include ui.def               ('text-opacity-10',                .10);
-  @include ui.define-color-token('text-a10', ui.color('main', 950, .10));
+  @include ui.define-color-token('text-a10', ui.color('primary', 'pure', .10));
   @include ui.def               ('text-opacity-25',                .25);
-  @include ui.define-color-token('text-a25', ui.color('main', 950, .25));
+  @include ui.define-color-token('text-a25', ui.color('primary', 'pure', .25));
   @include ui.def               ('text-opacity-50',                .50);
-  @include ui.define-color-token('text-a50', ui.color('main', 950, .50));
+  @include ui.define-color-token('text-a50', ui.color('primary', 'pure', .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-a75', ui.color('primary', 'pure', .75));
+}
 
-  @include ui.define-color-token('text-warning', ui.color('warning'));
+$offsets: (
+  'none': 0px,
+  'hairthin': 1px,
+  'thin': 2px,
+  'xxsmall': ui.q(.25),
+  'xsmall': ui.q(.5),
+  'small': ui.q(1),
+  'normal': ui.q(2),
+  'medium': ui.q(2.5),
+  'large': ui.q(4),
+  'xlarge': ui.q(6),
+  'safezone': ui.q(8),
+);
+
+@mixin offset-tokens() {
+  @each $name, $value in $offsets {
+    @include ui.def('offset-#{$name}', $value);
+  }
+}
 
-  @include ui.define-color-token('link-hover-decoration', ui.color('main', 950));
+$control-heights: (
+  'xxsmall': ui.q(1.5),
+  'xsmall': ui.q(3),
+  'small': ui.q(4),
+  'normal': ui.q(6),
+  'large': ui.q(7),
+  'xlarge': ui.q(10),
+);
+
+@mixin control-height-tokens() {
+  @each $name, $value in $control-heights {
+    @include ui.def('control-height-#{$name}', $value);
+  }
+}
 
-  @include ui.define-color-token('li-marker', ui.color('main', 950, .75));
+// Components tokens
 
-  @include ui.define-color-token('kbd-border', ui.color('main', 300));
-  @include ui.define-color-token('kbd-background', ui.color('main', 200));
+@mixin checkbox-tokens() {
+  @include ui.define-color-token('checkbox-focus-border-color', ui.color('primary'));
+  @include ui.def('checkbox-focus-border-size', ui.q(.25));
+}
 
-  @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));
+@mixin switch-tokens() {
+  @include ui.define-color-token('switch-focus-border-color', ui.color('primary'));
+  @include ui.def('switch-focus-border-size', ui.q(.25));
+}
 
-  @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));
+@mixin input-dropzone-tokens() {
+  @include ui.define-color-token('dropzone-focus-border-color', ui.color('primary'));
+  @include ui.def('dropzone-focus-border-size', ui.q(.25));
 
-  @include ui.define-color-token('backdrop-shader', ui.color('main', $alpha: .75));
+  @include ui.define-color-token('dropzone-border-color', ui.color('bg-light'));
+  @include ui.def('dropzone-border-size', 1px);
+}
 
+@mixin input-tokens() {
+  @include ui.define-color-token('input-placeholder', ui.color('primary', 'pure', .4));
+  @include ui.define-color-token('input-placeholder-hover', ui.color('primary', 'pure', .6));
 
-  // COMPONENTS
-  @include ui.define-color-token('avatar-background', ui.color('main'));
+  @include ui.define-color-token('input-text', ui.color('primary'));
+  @include ui.define-color-token('input-background', ui.color('bg'));
+
+  @include ui.def('input-border-size', 1px);
+  @include ui.define-color-token('input-border', ui.color('bg-light'));
+  @include ui.define-color-token('input-hover-border', ui.color('primary', 'pure', .1));
+  @include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
+  @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
+}
+
+@mixin select-tokens() {
+  @include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
+  @include ui.define-color-token('interactive-list-item-background', transparent);
+  @include ui.define-color-token('interactive-list-item-hover-background', ui.color('bg-light', 700, 1));
+  @include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, .5));
+}
+
+@mixin icon-tokens() {
+  @include ui.def('icon-big-size-small', ui.q(6));
+  @include ui.def('icon-big-size-normal', ui.q(8));
+  @include ui.def('icon-big-size-large', ui.q(12));
+}
 
+@mixin info-panel-tokens() {
+  @include ui.def('info-panel-focus-border-size', ui.q(.25));
 
-  @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('info-panel-border', ui.color('primary', 950, .7));
+  @include ui.define-color-token('info-panel-background', ui.color('primary', 950, .1));
+  @include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, .2));
+
+  @include ui.define-color-token('info-panel-error-border', ui.color('red'));
+  @include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: .2));
+  @include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: .4));
+
+  @include ui.define-color-token('info-panel-success-border', ui.color('green'));
+  @include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: .2));
+  @include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: .4));
+
+  @include ui.define-color-token('info-panel-warning-border', ui.color('yellow'));
+  @include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: .2));
+  @include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: .4));
+}
 
-  @include ui.define-color-token('badge-primary-border', ui.color('primary', 50));
-  @include ui.define-color-token('badge-primary-background', ui.color('primary'));
+@mixin tabular-tokens() {
+  @include ui.define-color-token('tabular-color-dark', ui.color('primary'));
+  @include ui.define-color-token('tabular-color-light', ui.color('accent'));
 
+  @include ui.def('tabular-notification-gap', ui.q(.75));
 
+  @include ui.def('tabular-item-height', ui.control-height('xlarge'));
+  @include ui.def('tabular-item-padding', ui.offset('medium'));
+
+  @include ui.def('tabular-item-border-size', ui.q(.25));
+}
+
+@mixin modal-tokens() {
+  @include ui.define-color-token('modal-background', ui.color('bg-light'));
+}
+
+@mixin scrollable-tokens() {
+  @include ui.def('scrollable-thumb-size', ui.q(1));
+  @include ui.def('scrollable-thumb-x-offset', 0);
+  @include ui.def('scrollable-thumb-y-offset', ui.q(1.5));
+  @include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: .4));
+  @include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: .6));
+  @include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: .8));
+}
+
+@mixin avatar-tokens() {
+  @include ui.define-color-token('avatar-background', ui.color('primary'));
+}
+
+@mixin title-tokens() {
+  @include ui.define-color-token('title-text', ui.color('bg'));
+  @include ui.define-color-token('title-background', ui.color('primary'));
+  @include ui.define-color-token('title-text-copy', ui.color('green'));
+  @include ui.define-color-token('title-background-dark', ui.color('bg'));
+}
+
+@mixin button-tokens() {
   @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-text', ui.color('primary'));
   @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-background', ui.color('primary', 'pure', .15));
+  @include ui.define-color-token('button-hover-border', ui.color('primary', 'pure', .05));
+  @include ui.define-color-token('button-hover-background', ui.color('primary', 'pure', .1));
+  @include ui.define-color-token('button-active-border', ui.color('primary', 'pure', .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('button-primary-text', ui.color('primary'));
+  @include ui.define-color-token('button-primary-border', ui.color('accent'));
+  @include ui.define-color-token('button-primary-background', ui.color('accent', 'pure', .4));
+  @include ui.define-color-token('button-primary-hover-text', ui.color('primary'));
+  @include ui.define-color-token('button-primary-hover-border', ui.color('accent'));
+  @include ui.define-color-token('button-primary-hover-background', ui.color('accent'));
+  @include ui.define-color-token('button-primary-active-text', ui.color('primary'));
+  @include ui.define-color-token('button-primary-active-border', transparent);
+  @include ui.define-color-token('button-primary-active-background', ui.color('accent', 'pure', .6));
+  @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', 'pure', .4));
+  @include ui.define-color-token('button-primary-disabled-border', ('accent', 'pure', .4));
+  @include ui.define-color-token('button-primary-disabled-background', transparent);
+
+  @include ui.define-color-token('button-secondary-text', ui.color('primary'));
+  @include ui.define-color-token('button-secondary-border', ui.color('primary'));
+  @include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
+  @include ui.define-color-token('button-secondary-hover-text', ui.color('bg'));
+  @include ui.define-color-token('button-secondary-hover-border', ui.color('primary'));
+  @include ui.define-color-token('button-secondary-hover-background', ui.color('primary'));
+  @include ui.define-color-token('button-secondary-active-text', ui.color('bg'));
+  @include ui.define-color-token('button-secondary-active-border', transparent);
+  @include ui.define-color-token('button-secondary-active-background', ui.color('primary', 'pure', .6));
+  @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', 'pure', .4));
+  @include ui.define-color-token('button-secondary-disabled-border', ('primary', 'pure', .4));
+  @include ui.define-color-token('button-secondary-disabled-background', transparent);
+
+  @include ui.define-color-token('button-onlight-text', ui.color('primary'));
+  @include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
+  @include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
+  @include ui.define-color-token('button-onlight-hover-text', ui.color('primary'));
+  @include ui.define-color-token('button-onlight-hover-border', ui.color('accent'));
+  @include ui.define-color-token('button-onlight-hover-background', ui.color('bg-dark'));
+  @include ui.define-color-token('button-onlight-active-text', ui.color('primary'));
+  @include ui.define-color-token('button-onlight-active-border', transparent);
+  @include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', 'pure', .6));
+  @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', 'pure', .4));
+  @include ui.define-color-token('button-onlight-disabled-border', ('bg-dark', 'pure', .4));
+  @include ui.define-color-token('button-onlight-disabled-background', transparent);
+}
+
+@mixin badge-tokens() {
+  @include ui.define-color-token('badge-success-text', ui.color('green'));
+  @include ui.define-color-token('badge-success-background', ui.color('green', $alpha: .2));
+  @include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: .4));
+
+  @include ui.define-color-token('badge-neutral-text', ui.color('secondary'));
+  @include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: .2));
+  @include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: .4));
+
+  @include ui.define-color-token('badge-warning-text', ui.color('yellow'));
+  @include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: .2));
+  @include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: .4));
+
+  @include ui.define-color-token('badge-error-text', ui.color('red'));
+  @include ui.define-color-token('badge-error-background', ui.color('red', $alpha: .2));
+  @include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: .4));
+}
+
+/**
+ * Look for usages by searching for `ui.color-token('name')`
+ */
+@mixin color-tokens() {
+  @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('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'));
+
+  // TODO: add text warning, success and error
+
+  @include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
+
+  @include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: .4));
+  @include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: .6));
+  @include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: .8));
+
+  @include ui.define-color-token('backdrop', ui.color('bg', $alpha: .75));
+  @include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: .25));
+  @include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: .5));
+  @include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: .75));
+
+  @include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: .75));
+
+
+  // COMPONENTS
+  @include ui.define-color-token('avatar-background', ui.color('main'));
 
 
   @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-indicator', ui.color('primary', 800));
 
   @include ui.define-color-token('checkbox-text', ui.color('main', 950));
   @include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
@@ -99,34 +309,6 @@
   @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));
@@ -145,11 +327,6 @@
   @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);
@@ -158,117 +335,19 @@
   @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('overlay-backdrop-background', ui.color('bg', $alpha: .65));
 
 
   @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('toggle-description-text', ui.color('main', 950, .5));
+  @include ui.define-color-token('toggle-border', ui.color('main', 950, .25));
 
+  @include ui.define-color-token('toggle-background', ui.color('main', 950, .1));
+  @include ui.define-color-token('toggle-hover-background', ui.color('main', 200));
 
-  @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));
+  @include ui.define-color-token('toggle-active-text', ui.color('main'));
+  @include ui.define-color-token('toggle-active-background', ui.color('main', 950, .75));
 }

package/dist/types/Offset.d.ts

@@ -0,0 +1 @@
+export type OffsetType = 'none' | 'hairthin' | 'thin' | 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'safezone';

package/dist/types/Offset.js

@@ -0,0 +1 @@
+

package/dist/utils/color.d.ts

@@ -0,0 +1,9 @@
+export interface GetColorProps {
+    colorToken?: string;
+    color?: string;
+    opacity?: number | string;
+    luminance?: number;
+}
+type GetColorPropsFn = GetColorProps & object;
+export declare function getColor(props: GetColorPropsFn): string | undefined;
+export {};

package/dist/utils/color.js

@@ -0,0 +1,18 @@
+function l(o) {
+  if ("colorToken" in o)
+    return `var(--color-${o.colorToken})`;
+  if (!("color" in o))
+    return;
+  if (o.color === "inherit")
+    return "inherit";
+  const {
+    color: e = "accent",
+    opacity: r = 1,
+    luminance: t
+  } = o, c = t ? t.toString() : "pure", i = c === "pure" ? `--color-${e}` : `--color-${e}-${c}`;
+  let n = "1";
+  return typeof r == "string" ? n = r : n = r > 0 ? String(r) : "0", `rgba(var(${i}), ${n})`;
+}
+export {
+  l as getColor
+};

package/dist/utils/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { usePopoverController } from './usePopoverController';
+export { useInstance } from './useInstance';
+export { useDynamicRef } from './useDynamicRef';
+export { useGlobalKeyboardEvent } from './useGlobalKeyboardEvent';
+export { useKeyboardClose } from './useKeyboardClose';
+export { useWindowResize } from './useWindowResize';
+export { useOutlet } from './useOutlet';
+export type { OutletPosition } from './useOutlet';

package/dist/utils/hooks/index.js

@@ -0,0 +1,16 @@
+import { usePopoverController as r } from "./usePopoverController.js";
+import { useInstance as s } from "./useInstance.js";
+import { useDynamicRef as m } from "./useDynamicRef.js";
+import { useGlobalKeyboardEvent as u } from "./useGlobalKeyboardEvent.js";
+import { useKeyboardClose as l } from "./useKeyboardClose.js";
+import { useWindowResize as a } from "./useWindowResize.js";
+import { useOutlet as d } from "./useOutlet.js";
+export {
+  m as useDynamicRef,
+  u as useGlobalKeyboardEvent,
+  s as useInstance,
+  l as useKeyboardClose,
+  d as useOutlet,
+  r as usePopoverController,
+  a as useWindowResize
+};

package/dist/utils/hooks/useDynamicRef.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare function useDynamicRef<T>(value: T): React.MutableRefObject<T>;

package/dist/utils/hooks/useDynamicRef.js

@@ -0,0 +1,8 @@
+import t from "react";
+function n(e) {
+  const r = t.useRef(e);
+  return r.current = e, r;
+}
+export {
+  n as useDynamicRef
+};

package/dist/utils/hooks/useGlobalKeyboardEvent.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+export declare function useGlobalKeyboardEvent<T extends (event: KeyboardEvent) => void>(callbackRef: React.MutableRefObject<T>, eventName?: 'keydown' | 'keyup' | 'keypress', capturing?: boolean): void;
+export declare namespace useGlobalKeyboardEvent {
+    var shouldProcessEvent: (event: KeyboardEvent) => boolean;
+}

package/dist/utils/hooks/useGlobalKeyboardEvent.js

@@ -0,0 +1,29 @@
+import a from "react";
+function o(e, t = "keydown", r) {
+  a.useEffect(() => {
+    const n = (s) => {
+      o.shouldProcessEvent(s) && e.current(s);
+    };
+    return window.addEventListener(t, n, r), () => {
+      window.removeEventListener(t, n, r);
+    };
+  }, [t, r]);
+}
+o.shouldProcessEvent = (e) => {
+  if (e.target instanceof Element) {
+    if (e.target.hasAttribute("contenteditable"))
+      return !1;
+    switch (e.target.tagName) {
+      case "INPUT":
+      case "SELECT":
+      case "TEXTAREA":
+        return !1;
+      default:
+        return !0;
+    }
+  }
+  return !0;
+};
+export {
+  o as useGlobalKeyboardEvent
+};

package/dist/utils/hooks/useInstance.d.ts

@@ -0,0 +1 @@
+export declare function useInstance<T, Args extends any[]>(init: (...args: Args) => T, ...args: Args): T;