@genexus/mercury 0.0.2

package/src/mercury.scss

@@ -0,0 +1,294 @@
+// Resets
+@import "../../common/resets";
+
+// Tokens > Primitive
+@import "./tokens/primitive/border";
+@import "./tokens/primitive/color";
+@import "./tokens/primitive/elevation";
+@import "./tokens/primitive/font";
+@import "./tokens/primitive/spacing";
+@import "./tokens/primitive/timing";
+
+// Tokens > Semantic
+@import "./tokens/semantic/tokens";
+
+// Other
+@import "./mixins";
+@import "./base/icons/sass/icons-selectors.scss";
+
+// Base
+@import "./base/button/styles";
+
+// Components
+@import "./components/checkbox/styles";
+@import "./components/shortcuts/styles";
+@import "./components/tree-view/styles";
+
+@mixin mercury(
+  // Resets
+  $resets: true,
+  $box-sizing-reset: true,
+  $button-reset: true,
+  $input-reset: true,
+  $other-reset: true,
+  $typography-reset: true,
+
+  // Theme
+  $light-theme: true,
+  $dark-theme: true,
+  $prefers-color-scheme-light: false,
+  $prefers-color-scheme-dark: false,
+
+  // Tokens
+  $tokens: true,
+  $border: true,
+  $color: true,
+  $elevation: true,
+  $font: true,
+  $spacing: true,
+  $timing: true,
+
+  // Icons
+  $icons: true,
+  $icons-path: "./assets/icons",
+
+  // Font face
+  $font-face: true,
+
+  // Base
+  $base-classes: true,
+  $button-classes: true,
+  $buttons-classes-with-icons: true,
+
+  // Components
+  $components: true,
+  $checkbox: true,
+  $tree-view: true
+) {
+  // - - - - - - - - - - - - - - - - - - - -
+  //                 Resets
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $resets {
+    // box-sizing
+    @if $box-sizing-reset {
+      @include box-sizing();
+    }
+
+    // <button> and <a> reset
+    @if $button-reset {
+      @include button-reset();
+    }
+
+    @if $input-reset {
+      @include input-reset();
+    }
+
+    // <hr> reset
+    @if $other-reset {
+      @include other-reset();
+    }
+
+    // Typography reset
+    @if $typography-reset {
+      @include typography-reset();
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Body
+  // - - - - - - - - - - - - - - - - - - - -
+  body {
+    @if $tokens and $color {
+      background-color: var(--mer-body__bg-color);
+      color: var(--mer-body__color);
+    }
+    @if $tokens and $font {
+      font-size: var(--mer-body__font-size);
+      line-height: var(--mer-body__line-height);
+    }
+    @if $font-face {
+      font-family: var(--mer-font-family--primary);
+    }
+    margin: 0;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                 Base
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $base-classes {
+    @if $button-classes {
+      @include button($buttons-classes-with-icons);
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                 Icons
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $icons and $icons-path {
+    @include icons-lists($icons-path: $icons-path);
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //               Typography
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $font-face {
+    //light
+    @font-face {
+      font-family: "Inter";
+      font-style: normal;
+      font-weight: 300;
+      src: url("../src/assets/fonts/Inter_Light.woff2") format("woff2");
+      font-display: swap;
+    }
+
+    //regular
+    @font-face {
+      font-family: "Inter";
+      font-style: normal;
+      font-weight: 400;
+      src: url("../src/assets/fonts/Inter_Regular.woff2") format("woff2");
+      font-display: swap;
+    }
+
+    //semi-bold
+    @font-face {
+      font-family: "Inter";
+      font-style: normal;
+      font-weight: 600;
+      src: url("../src/assets/fonts/Inter_SemiBold.woff2") format("woff2");
+      font-display: swap;
+    }
+
+    //bold
+    @font-face {
+      font-family: "Inter";
+      font-style: normal;
+      font-weight: 700;
+      src: url("../src/assets/fonts/Inter_Bold.woff2") format("woff2");
+      font-display: swap;
+    }
+
+    //extra-bold
+    @font-face {
+      font-family: "Inter";
+      font-style: normal;
+      font-weight: 800;
+      src: url("../src/assets/fonts/Inter_ExtraBold.woff2") format("woff2");
+      font-display: swap;
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //        Primitive Color Tokens
+  // - - - - - - - - - - - - - - - - - - - -
+  // Light
+  @if $color and $light-theme and $tokens {
+    :root {
+      @include foundation-colors--light();
+    }
+  }
+  @if $color and $tokens and $prefers-color-scheme-light {
+    @media (prefers-color-scheme: light) {
+      :root {
+        @include foundation-colors--light();
+      }
+    }
+  }
+  // Dark
+  @if $color and $dark-theme and $tokens {
+    :root.dark {
+      @include foundation-colors--dark();
+    }
+  }
+  @if $color and $tokens and $prefers-color-scheme-dark {
+    @media (prefers-color-scheme: dark) {
+      :root {
+        @include foundation-colors--dark();
+      }
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //              Other Tokens
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $tokens and
+    (
+      $border or
+        $color or
+        ($elevation and $light-theme) or
+        ($elevation and $prefers-color-scheme-light) or
+        ($elevation and $dark-theme) or
+        ($elevation and $prefers-color-scheme-dark) or
+        $font or
+        $spacing or
+        $timing
+    )
+  {
+    :root {
+      // border
+      @if $border {
+        @include border();
+      }
+
+      // color
+      @if $color {
+        @include semantic-accent();
+        @include semantic-border();
+        @include semantic-heading();
+        @include semantic-icon();
+        @include semantic-item();
+        @include semantic-other();
+        @include semantic-text();
+      }
+
+      // elevation (light)
+      @if $elevation and $light-theme {
+        @include elevation--light();
+      }
+      @if $elevation and $prefers-color-scheme-light {
+        @media (prefers-color-scheme: light) {
+          @include elevation--light();
+        }
+      }
+
+      // elevation (dark)
+      @if $elevation and $dark-theme {
+        &.dark {
+          @include elevation--dark();
+        }
+      }
+      @if $elevation and $prefers-color-scheme-dark {
+        @media (prefers-color-scheme: dark) {
+          @include elevation--dark();
+        }
+      }
+
+      // font
+      @if $font {
+        @include font();
+      }
+
+      // spacing
+      @if $spacing {
+        @include spacing();
+      }
+
+      // timing
+      @if $timing {
+        @include timing();
+      }
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //               Components
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $components {
+    @if $checkbox {
+      @include checkbox();
+    }
+    @if $tree-view {
+      @include tree-view();
+    }
+  }
+}

package/src/tokens/primitive/_border.scss

@@ -0,0 +1,13 @@
+@mixin border() {
+  //Border Widths
+  --mer-border__width--sm: 1px;
+  --mer-border__width--md: 2px;
+  --mer-border__width--lg: 4px;
+
+  //Border Radius
+  --mer-border__radius--xs: 2px;
+  --mer-border__radius--sm: 4px;
+  --mer-border__radius--md: 8px;
+  --mer-border__radius--lg: 12px;
+  --mer-border__radius--xl: 30px;
+}

package/src/tokens/primitive/_color.scss

@@ -0,0 +1,109 @@
+@mixin foundation-colors--light() {
+  //Primary
+  --mer-color__primary-blue--200: #2070ce;
+  --mer-color__primary-blue--300: #ffffff;
+  --mer-color__primary-blue--400: #437dc0;
+  --mer-color__primary-blue--600: #335884;
+
+  //Neutral
+  --mer-color__neutral-gray--00: #363636;
+  --mer-color__neutral-gray--100: #525151;
+  --mer-color__neutral-gray--200: #616161;
+  --mer-color__neutral-gray--300: #696969;
+  --mer-color__neutral-gray--400: #666666;
+  --mer-color__neutral-gray--500: #7f7f7f;
+  --mer-color__neutral-gray--600: #999999;
+  --mer-color__neutral-gray--700: #b3b3b3;
+  --mer-color__neutral-gray--800: #cccccc;
+  --mer-color__neutral-gray--900: #ffffff;
+  --mer-color__neutral-gray--1000: #f8f8f8;
+  --mer-color__neutral-gray--1100: #f1f1f1;
+  --mer-color__neutral-gray--1200: #e4e4e4;
+  --mer-color__neutral-gray--1300: #dedede;
+  --mer-color__neutral-gray--1400: #ffffff;
+
+  //Tinted Grays
+  --mer-color__tinted-yellow--5: #ffc96b0d;
+  --mer-color__tinted-yellow--60: #ffc96b99;
+  --mer-color__tinted-red--5: #fb7c840d;
+  --mer-color__tinted-red--60: #fb7c8499;
+  --mer-color__tinted-green--5: #64d9a80d;
+  --mer-color__tinted-green--60: #64d9a899;
+  --mer-color__tinted-blue--5: #2070ce0d;
+  --mer-color__tinted-blue--8: #2070ce14;
+  --mer-color__tinted-blue--10: #2070ce1a;
+  --mer-color__tinted-blue--20: #2070ce33;
+  --mer-color__tinted-blue--50: #2070ce80;
+
+  //Message
+  --mer-color__message-green--100: #64d9a8;
+  --mer-color__message-green--200: #5dc599;
+  --mer-color__message-yellow--100: #ffc96b;
+  --mer-color__message-yellow--200: #ffc96b;
+  --mer-color__message-red--100: #fb7c84;
+  --mer-color__message-red--200: #fb7c84;
+
+  //Surface
+  --mer-color__surface: #f4f5f5;
+
+  //Elevation
+  --mer-color__elevation--01: var(--mer-color__neutral-gray--900);
+  --mer-color__elevation--02: var(--mer-color__neutral-gray--900);
+  --mer-color__elevation--03: var(--mer-color__neutral-gray--900);
+  --mer-color__elevation--04: var(--mer-color__neutral-gray--900);
+}
+
+@mixin foundation-colors--dark() {
+  //Primary
+  --mer-color__primary-blue--200: #5ba7ff;
+  --mer-color__primary-blue--300: #5498e8;
+  --mer-color__primary-blue--400: #437dc0;
+  --mer-color__primary-blue--600: #335884;
+
+  //Neutral
+  --mer-color__neutral-gray--00: #ffffff;
+  --mer-color__neutral-gray--100: #cccccc;
+  --mer-color__neutral-gray--200: #b3b3b3;
+  --mer-color__neutral-gray--300: #999999;
+  --mer-color__neutral-gray--400: #7f7f7f;
+  --mer-color__neutral-gray--500: #666666;
+  --mer-color__neutral-gray--600: #4d4d4d;
+  --mer-color__neutral-gray--700: #333333;
+  --mer-color__neutral-gray--800: #1a1a1a;
+  --mer-color__neutral-gray--900: #000000;
+  --mer-color__neutral-gray--1000: #1f2225;
+  --mer-color__neutral-gray--1100: #24272a;
+  --mer-color__neutral-gray--1200: #2d3032;
+  --mer-color__neutral-gray--1300: #3b3e40;
+  --mer-color__neutral-gray--1400: #2d3134;
+
+  //Tinted Grays
+  --mer-color__tinted-yellow--5: #ffc96b0d;
+  --mer-color__tinted-yellow--60: #ffc96b99;
+  --mer-color__tinted-red--5: #53272a0d;
+  --mer-color__tinted-red--60: #fb7c8499;
+  --mer-color__tinted-green--50: #64d9a80d;
+  --mer-color__tinted-green--60: #64d9a899;
+  --mer-color__tinted-blue--5: #0d5ba70d;
+  --mer-color__tinted-blue--8: #5ba7ff14;
+  --mer-color__tinted-blue--10: #5ba7ff1a;
+  --mer-color__tinted-blue--20: #5ba7ff33;
+  --mer-color__tinted-blue--50: #5ba7ff80;
+
+  //Message
+  --mer-color__message-green--100: #64d9a8;
+  --mer-color__message-green--200: #5dc599;
+  --mer-color__message-yellow--100: #ffc96b;
+  --mer-color__message-yellow--200: #f9bd56;
+  --mer-color__message-red--100: #fb7c84;
+  --mer-color__message-red--200: #e35861;
+
+  //Surface
+  --mer-color__surface: #1a1d20;
+
+  //Elevation
+  --mer-color__elevation--01: #202428;
+  --mer-color__elevation--02: #262a2f;
+  --mer-color__elevation--03: #2b3237;
+  --mer-color__elevation--04: #3b4044;
+}

package/src/tokens/primitive/_elevation.scss

@@ -0,0 +1,38 @@
+@mixin elevation--light() {
+  /*background color*/
+  --mer-elevation__background-color--01: var(--mer-color__neutral-gray--900);
+  --mer-elevation__background-color--02: var(--mer-color__neutral-gray--900);
+  --mer-elevation__background-color--03: var(--mer-color__neutral-gray--900);
+  --mer-elevation__background-color--04: var(--mer-color__neutral-gray--900);
+  /*border*/
+  --mer-elevation__border-01: transparent;
+  --mer-elevation__border-02: transparent;
+  --mer-elevation__border-03: transparent;
+  --mer-elevation__border-04: transparent;
+  /*box shadow*/
+  --mer-elevation__box-shadow--01: 0px 2px 1px -1px rgba(0, 0, 0, 0.08),
+    0px 1px 4px 0px rgba(0, 0, 0, 0.06);
+  --mer-elevation__box-shadow--02: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+    0px 2px 4px -1px rgba(0, 0, 0, 0.1);
+  --mer-elevation__box-shadow--03: 0px 3px 14px 2px rgba(0, 0, 0, 0.12),
+    0px 5px 5px -3px rgba(0, 0, 0, 0.1);
+  --mer-elevation__box-shadow--04: 0px 5px 22px 4px rgba(0, 0, 0, 0.12),
+    0px 7px 8px -4px rgba(0, 0, 0, 0.1);
+}
+
+@mixin elevation--dark() {
+  /*background color*/
+  --mer-elevation__background-color--01: var(--mer-color__elevation--01);
+  --mer-elevation__background-color--02: var(--mer-color__elevation--02);
+  --mer-elevation__background-color--03: var(--mer-color__elevation--03);
+  --mer-elevation__background-color--04: var(--mer-color__elevation--04);
+  /*border*/
+  --mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
+  --mer-elevation__border-03: transparent;
+  --mer-elevation__border-04: transparent;
+  /*box shadow*/
+  --mer-elevation__box-shadow--01: none;
+  --mer-elevation__box-shadow--02: none;
+  --mer-elevation__box-shadow--03: none;
+  --mer-elevation__box-shadow--04: none;
+}

package/src/tokens/primitive/_font.scss

@@ -0,0 +1,37 @@
+/* font weights used by mercury:
+- light (300)
+- regular (400)
+- semi-bold (600)
+- bold (700)
+- extra-bold (800)
+*/
+
+@mixin font() {
+  /*Families*/
+  --mer-font-family--primary: "Inter", sans-serif;
+
+  /*Weights*/
+  --mer-font__weight--light: 300;
+  --mer-font__weight--regular: 400;
+  --mer-font__weight--semi-bold: 600;
+  --mer-font__weight--bold: 700;
+  --mer-font__weight--extra-bold: 800;
+
+  /*Sizes*/
+  --mer-font__size--xxs: 12px;
+  --mer-font__size--xs: 14px;
+  --mer-font__size--sm: 16px;
+  --mer-font__size--md: 20px;
+  --mer-font__size--lg: 24px;
+  --mer-font__size--xl: 36px;
+
+  /*Line Heights*/
+  --mer-line-height--tight: 1.4em;
+  --mer-line-height--regular: 1.6em;
+  --mer-line-height--comfortable: 1.7em;
+
+  /*Letter Spacings (to be done)*/
+  // --mer-letter-spacing--tight: ;
+  // --mer-letter-spacing--regular: ;
+  // --mer-letter-spacing--comfortable: ;
+}

package/src/tokens/primitive/_spacing.scss

@@ -0,0 +1,12 @@
+@mixin spacing() {
+  --mer-spacing--3xs: 2px;
+  --mer-spacing--2xs: 4px;
+  --mer-spacing--xs: 8px;
+  --mer-spacing--sm: 12px;
+  --mer-spacing--md: 16px;
+  --mer-spacing--lg: 24px;
+  --mer-spacing--xl: 32px;
+  --mer-spacing--2xl: 40px;
+  --mer-spacing--3xl: 48px;
+  --mer-spacing--4xl: 64px;
+}

package/src/tokens/primitive/_timing.scss

@@ -0,0 +1,6 @@
+@mixin timing() {
+  --mer-timing--super-fast: 100;
+  --mer-timing--fast: 200;
+  --mer-timing--regular: 500;
+  --mer-timing--slow: 1000;
+}

package/src/tokens/semantic/_accent.scss

@@ -0,0 +1,7 @@
+@mixin semantic-accent() {
+  --mer-accent__primary: var(--mer-color__primary-blue--200);
+  --mer-accent__primary--hover: var(--mer-color__primary-blue--400);
+  --mer-accent__primary--active: var(--mer-color__primary-blue--600);
+  --mer-accent__primary--disabled: var(--mer-color__neutral-gray--700);
+  --mer-accent__primary--destructive: var(--mer-color__message-red--100);
+}

package/src/tokens/semantic/_border.scss

@@ -0,0 +1,16 @@
+@mixin semantic-border() {
+  --mer-border-color__primary: var(--mer-accent__primary);
+  --mer-border-color__primary--hover: var(--mer-accent__primary--hover);
+  --mer-border-color__primary--active: var(--mer-accent__primary--active);
+  --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);
+  --mer-border-color__primary--focused: var(--mer-color__neutral-gray--00);
+  --mer-border-color__error: var(--mer-color__message-red--100);
+  --mer-border-color__warning: var(--mer-color__message-yellow--100);
+  --mer-border-color__success: var(--mer-color__message-green--100);
+  --mer-border-color__neutral: var(--mer-color__neutral-gray--200);
+  --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100);
+  --mer-border-color__neutral--active: var(--mer-color__neutral-gray--00);
+  --mer-border-color__dim: var(--mer-color__neutral-gray--600);
+  --mer-border-color__control--focused: var(--mer-color__primary-blue--200);
+  --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--1400);
+}

package/src/tokens/semantic/_heading.scss

@@ -0,0 +1,3 @@
+@mixin semantic-heading() {
+  --mer-heading__font-color: var(--mer-color__neutral-gray--100);
+}

package/src/tokens/semantic/_icon.scss

@@ -0,0 +1,18 @@
+@mixin semantic-icon() {
+  --mer-icon__on-surface: var(--mer-color__neutral-gray--300);
+  --mer-icon__on-primary: var(--mer-color__neutral-gray--800);
+  --mer-icon__on-primary--active: var(--mer-color__neutral-gray--00);
+  --mer-icon__on-disabled: var(--mer-color__neutral-gray--500);
+  --mer-icon__on-message: var(--mer-color__neutral-gray--700);
+  --mer-icon__on-elevation: var(--mer-color__neutral-gray--600);
+  --mer-icon__primary: var(--mer-accent__primary);
+  --mer-icon__primary--hover: var(--mer-accent__primary--hover);
+  --mer-icon__primary--active: var(--mer-accent__primary--active);
+  --mer-icon__primary--disabled: var(--mer-accent__primary--disabled);
+  --mer-icon__error: var(--mer-color__message-red--100);
+  --mer-icon__warning: var(--mer-color__message-yellow--100);
+  --mer-icon__success: var(--mer-color__message-green--100);
+  --mer-icon__neutral: var(--mer-color__neutral-gray--200);
+  --mer-icon__highlighted: var(--mer-color__neutral-gray--100);
+  --mer-icon__bright: var(--mer-color__neutral-gray--00);
+}

package/src/tokens/semantic/_item.scss

@@ -0,0 +1,21 @@
+@mixin semantic-item() {
+  //enabled
+  --mer-item__color: ;
+  --mer-item__bg-color: ;
+  --mer-item__border-color: var(--mer-color__tinted-blue--20);
+
+  //hover
+  --mer-item__color--hover: var(--mer-color__neutral-gray--100);
+  --mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
+  --mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
+
+  //selected
+  --mer-item__color--selected: var(--mer-color__neutral-gray--100);
+  --mer-item__bg-color--selected: var(--mer-color__tinted-blue--10);
+  --mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
+
+  //selected + hover
+  --mer-item__color--selected-hover: var(--mer-color__neutral-gray--100);
+  --mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
+  --mer-item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
+}

package/src/tokens/semantic/_other.scss

@@ -0,0 +1,46 @@
+@mixin semantic-other() {
+  /*----------------------
+  Body
+  ----------------------*/
+  --mer-body__bg-color: var(--mer-color__surface);
+  --mer-body__color: var(--mer-text__on-surface);
+  --mer-body__font-size: var(--mer-font__size--xxs);
+  --mer-body__line-height: var(--mer-line-height--regular);
+
+  /*----------------------
+  Scrollbar
+  ----------------------*/
+  // scrollbar
+  --mer-scrollbar__size: var(--mer-spacing--xs);
+
+  // scrollbar-track
+  --mer-scrollbar-track__bg-color: var(--mer-color__elevation--03);
+  --mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
+
+  // scrollbar-thumb
+  --mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
+  --mer-scrollbar-thumb__bg-color--hover: var(--mer-color__elevation--04);
+  --mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
+
+  // scrollbar-thumb
+  --mer-scrollbar-corner__bg: rgba(0, 0, 0, 0);
+
+  /*----------------------
+  Icon
+  ----------------------*/
+  // size
+  --mer-icon-shell__size--sm: var(--mer-spacing--md);
+  --mer-icon__size--sm: var(--mer-spacing--sm);
+  --mer-icon-shell__size--lg: var(--mer-spacing--sm);
+  --mer-icon__size--lg: var(--mer-spacing--xs);
+
+  /*----------------------
+  Label
+  ----------------------*/
+  // size
+  // space between label and control
+  --mer-label__space: var(--mer-spacing--xs);
+  --mer-label__font-size: inherit;
+  --mer-label__font-weight: var(--mer-font__weight--semi-bold);
+  --mer-label__color: inherit;
+}

package/src/tokens/semantic/_text.scss

@@ -0,0 +1,16 @@
+@mixin semantic-text() {
+  --mer-text__on-surface: var(--mer-color__neutral-gray--300);
+  --mer-text__on-primary: var(--mer-color__neutral-gray--800);
+  --mer-text__on-primary--active: var(--mer-color__neutral-gray--00);
+  --mer-text__on-disabled: var(--mer-color__neutral-gray--500);
+  --mer-text__on-message: var(--mer-color__neutral-gray--700);
+  --mer-text__on-elevation: var(--mer-color__neutral-gray--00);
+  --mer-text__primary: var(--mer-accent__primary);
+  --mer-text__primary--hover: var(--mer-accent__primary--hover);
+  --mer-text__primary--active: var(--mer-accent__primary--active);
+  --mer-text__primary--disabled: #5b5b5b; //This color is not currently linked to any value on the grayscale scale (no primitive value).
+  --mer-text__disabled: var(--mer-color__neutral-gray--600);
+  --mer-text__neutral: var(--mer-color__neutral-gray--200);
+  --mer-text__highlighted: var(--mer-color__neutral-gray--100);
+  --mer-text__bright: var(--mer-color__neutral-gray--00);
+}

package/src/tokens/semantic/_tokens.scss

@@ -0,0 +1,7 @@
+@import "accent";
+@import "border";
+@import "heading";
+@import "icon";
+@import "item";
+@import "text";
+@import "other";