@genexus/mercury 0.0.2

package/dist/mercury.scss

@@ -0,0 +1,3421 @@
+// Resets
+@mixin typography-reset() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    font: unset;
+    margin: 0;
+    padding: 0;
+    color: unset;
+  }
+}
+
+@mixin button-reset() {
+  :where(button, a) {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+
+    // Disallow selecting the text
+    user-select: none;
+
+    // Avoid zooming on double tap on iOS devices
+    touch-action: manipulation;
+
+    // Allow user drag
+    // -webkit-user-drag: element;
+
+    cursor: pointer;
+  }
+
+  button:disabled {
+    pointer-events: none;
+  }
+}
+
+@mixin input-reset() {
+  input,
+  select,
+  textarea {
+    padding: 0;
+    margin: 0;
+    background-color: unset;
+    border: unset;
+    color: unset;
+    font: unset;
+    outline: unset;
+  }
+}
+
+@mixin other-reset() {
+  hr {
+    block-size: 1px;
+    margin: unset;
+    padding: unset;
+    border: unset;
+    background-color: currentColor;
+  }
+
+  fieldset,
+  legend {
+    padding: 0;
+    margin: 0;
+  }
+
+  img {
+    display: block;
+  }
+}
+
+@mixin box-sizing() {
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+}
+
+
+// Tokens > Primitive
+@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;
+}
+
+@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;
+}
+
+@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;
+}
+
+/* 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: ;
+}
+
+@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;
+}
+
+@mixin timing() {
+  --mer-timing--super-fast: 100;
+  --mer-timing--fast: 200;
+  --mer-timing--regular: 500;
+  --mer-timing--slow: 1000;
+}
+
+
+// Tokens > Semantic
+@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);
+}
+
+@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);
+}
+
+@mixin semantic-heading() {
+  --mer-heading__font-color: var(--mer-color__neutral-gray--100);
+}
+
+@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);
+}
+
+@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);
+}
+
+@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);
+}
+
+@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;
+}
+
+
+
+// Other
+/*----------------------
+Scrollbar
+----------------------*/
+@mixin mer-scrollbar {
+  //scrollbar
+  &::-webkit-scrollbar {
+    width: var(--mer-scrollbar__size);
+    height: var(--mer-scrollbar__size);
+  }
+
+  //track
+  &::-webkit-scrollbar-track {
+    background-color: var(--mer-scrollbar-track__bg-color);
+    border-radius: var(--mer-scrollbar-track__border-radius);
+  }
+
+  //thumb
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--mer-scrollbar-thumb__bg-color);
+    border-radius: var(--mer-scrollbar-thumb__border-radius);
+  }
+
+  //thumb:hover
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--mer-scrollbar-thumb__bg-color--hover);
+  }
+
+  //corner
+  &::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+  }
+}
+
+/*----------------------
+Focus
+----------------------*/
+@mixin mer-focus {
+  outline-width: var(--mer-border__width--sm);
+  outline-style: solid;
+  outline-color: var(--mer-color__primary-blue--200);
+  outline-offset: -1px;
+}
+
+/*----------------------------------------------------
+Item (applies to every item (tree, grid, list, etc...)
+----------------------------------------------------*/
+@mixin mer-item($state: "hover") {
+  @if $state == "hover" {
+    &:hover {
+      color: var(--mer-item__color--hover);
+      background-color: var(--mer-item__bg-color--hover);
+      border-color: var(--mer-item__border-color--hover);
+    }
+  }
+  @if $state == "selected" {
+    color: var(--mer-item__color--selected);
+    background-color: var(--mer-item__bg-color--selected);
+    border-color: var(--mer-item__border-color--selected);
+  }
+  @if $state == "selected-hover" {
+    &:hover {
+      color: var(--mer-item__color--selected-hover);
+      background-color: var(--mer-item__bg-color--selected-hover);
+      border-color: var(--mer-item__border-color--selected-hover);
+    }
+  }
+}
+
+/*----------------------
+Checkbox
+----------------------*/
+@mixin mer-checkbox($part) {
+  //container
+  @if $part == "container" {
+    box-sizing: border-box;
+    background-color: var(--mer-checkbox__bg-color);
+    &:after {
+      content: "";
+      position: absolute;
+      display: block;
+      border: solid;
+      border-color: transparent;
+      z-index: 0;
+    }
+    /*additional styles*/
+    width: var(--mer-checkbox__size);
+    height: var(--mer-checkbox__size);
+    position: relative;
+    border-width: var(--mer-checkbox__border-width);
+    border-style: var(--mer-checkbox__border-style);
+    border-color: var(--mer-checkbox__border-color);
+    border-radius: var(--mer-checkbox__border-radius);
+  }
+  // container:focus
+  @if $part == "container--focus-within" {
+    @include mer-focus();
+    box-shadow: none;
+  }
+  // container:checked
+  @if $part == "container--checked" {
+    &:after {
+      left: 5px;
+      top: 2.5px;
+      width: 4.5px;
+      height: 7.5px;
+      border-width: 0 2px 2px 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      border-color: var(--mer-checkbox-check__border-color);
+    }
+  }
+  // container:checked + disabled
+  @if $part == "container--checked-disabled" {
+    &:after {
+      border-color: var(--mer-text__disabled);
+    }
+  }
+  // container:indeterminate
+  @if $part == "container--indeterminate" {
+    &:after {
+      left: 50%;
+      top: 50%;
+      width: 8px;
+      height: 2px;
+      border: 0;
+      background-color: var(--mer-checkbox-check__border-color);
+      -webkit-transform: rotate(0) translateY(-50%) translateX(-50%);
+      -ms-transform: rotate(0) translateY(-50%) translateX(-50%);
+      transform: rotate(0) translateY(-50%) translateX(-50%);
+    }
+  }
+  // container:indeterminate + disabled
+  @if $part == "container--indeterminate-disabled" {
+    &:after {
+      background-color: var(--mer-text__disabled);
+    }
+  }
+
+  //container > input
+  @if $part == "input" {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  //container > option
+  @if $part == "option" {
+    display: none;
+  }
+
+  //label
+  @if $part == "label" {
+    margin-inline-start: var(--mer-label__space);
+    font-weight: var(--mer-label__font-weight);
+  }
+  @if $part == "label--disabled" {
+    color: var(--mer-text__disabled);
+  }
+}
+
+
+    
+//Multicolor lists
+    
+    
+@mixin icons-lists($icons-path: "./assets/icons") {
+  $icons-objects: api, attribute, bg-color, business-process-diagram, calendars, category, conversational-flows, customization, dashboard, data-provider, data-selector, data-view, datastore-category, datastore, dataview-index, deployment-unit, design, diagram, document-workflow, document, domain, dso, environment-no-select, environment-select, external-object, file, folder-open, folder, generator-category, generator, image, knowledge-base, lenguage, main-object, masterpage, menu, menubar, mini-app, module-open, module, notification-templates, object, offline-database, orphant-document, panel-for-sd, patterns, procedure, query, references, report, roles, stencil, structured-data-type, subtype-group, super-app, table, theme-for-sd, theme-web, theme, to-be-defined, transaction, url-rewrite, version, web-component, webpanel, work-panel, workflow;
+%icon__objects {
+  
+  // api.svg
+  &-api--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/api.svg#enabled");
+  }
+  &-api--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/api.svg#enabled");
+  }
+
+  &-api--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/api.svg#hover");
+  }
+  &-api--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/api.svg#hover");
+  }
+
+  &-api--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/api.svg#active");
+  }
+  &-api--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/api.svg#active");
+  }
+
+  &-api--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/api.svg#disabled");
+  }
+  &-api--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/api.svg#disabled");
+  }
+    
+  // attribute.svg
+  &-attribute--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/attribute.svg#enabled");
+  }
+  &-attribute--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/attribute.svg#enabled");
+  }
+
+  &-attribute--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/attribute.svg#hover");
+  }
+  &-attribute--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/attribute.svg#hover");
+  }
+
+  &-attribute--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/attribute.svg#active");
+  }
+  &-attribute--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/attribute.svg#active");
+  }
+
+  &-attribute--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/attribute.svg#disabled");
+  }
+  &-attribute--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/attribute.svg#disabled");
+  }
+    
+  // bg-color.svg
+  &-bg-color--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/bg-color.svg#enabled");
+  }
+  &-bg-color--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/bg-color.svg#enabled");
+  }
+
+  &-bg-color--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/bg-color.svg#hover");
+  }
+  &-bg-color--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/bg-color.svg#hover");
+  }
+
+  &-bg-color--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/bg-color.svg#active");
+  }
+  &-bg-color--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/bg-color.svg#active");
+  }
+
+  &-bg-color--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/bg-color.svg#disabled");
+  }
+  &-bg-color--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/bg-color.svg#disabled");
+  }
+    
+  // business-process-diagram.svg
+  &-business-process-diagram--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/business-process-diagram.svg#enabled");
+  }
+  &-business-process-diagram--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/business-process-diagram.svg#enabled");
+  }
+
+  &-business-process-diagram--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/business-process-diagram.svg#hover");
+  }
+  &-business-process-diagram--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/business-process-diagram.svg#hover");
+  }
+
+  &-business-process-diagram--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/business-process-diagram.svg#active");
+  }
+  &-business-process-diagram--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/business-process-diagram.svg#active");
+  }
+
+  &-business-process-diagram--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/business-process-diagram.svg#disabled");
+  }
+  &-business-process-diagram--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/business-process-diagram.svg#disabled");
+  }
+    
+  // calendars.svg
+  &-calendars--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/calendars.svg#enabled");
+  }
+  &-calendars--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/calendars.svg#enabled");
+  }
+
+  &-calendars--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/calendars.svg#hover");
+  }
+  &-calendars--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/calendars.svg#hover");
+  }
+
+  &-calendars--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/calendars.svg#active");
+  }
+  &-calendars--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/calendars.svg#active");
+  }
+
+  &-calendars--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/calendars.svg#disabled");
+  }
+  &-calendars--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/calendars.svg#disabled");
+  }
+    
+  // category.svg
+  &-category--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/category.svg#enabled");
+  }
+  &-category--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/category.svg#enabled");
+  }
+
+  &-category--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/category.svg#hover");
+  }
+  &-category--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/category.svg#hover");
+  }
+
+  &-category--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/category.svg#active");
+  }
+  &-category--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/category.svg#active");
+  }
+
+  &-category--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/category.svg#disabled");
+  }
+  &-category--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/category.svg#disabled");
+  }
+    
+  // conversational-flows.svg
+  &-conversational-flows--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/conversational-flows.svg#enabled");
+  }
+  &-conversational-flows--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/conversational-flows.svg#enabled");
+  }
+
+  &-conversational-flows--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/conversational-flows.svg#hover");
+  }
+  &-conversational-flows--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/conversational-flows.svg#hover");
+  }
+
+  &-conversational-flows--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/conversational-flows.svg#active");
+  }
+  &-conversational-flows--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/conversational-flows.svg#active");
+  }
+
+  &-conversational-flows--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/conversational-flows.svg#disabled");
+  }
+  &-conversational-flows--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/conversational-flows.svg#disabled");
+  }
+    
+  // customization.svg
+  &-customization--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/customization.svg#enabled");
+  }
+  &-customization--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/customization.svg#enabled");
+  }
+
+  &-customization--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/customization.svg#hover");
+  }
+  &-customization--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/customization.svg#hover");
+  }
+
+  &-customization--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/customization.svg#active");
+  }
+  &-customization--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/customization.svg#active");
+  }
+
+  &-customization--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/customization.svg#disabled");
+  }
+  &-customization--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/customization.svg#disabled");
+  }
+    
+  // dashboard.svg
+  &-dashboard--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dashboard.svg#enabled");
+  }
+  &-dashboard--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dashboard.svg#enabled");
+  }
+
+  &-dashboard--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dashboard.svg#hover");
+  }
+  &-dashboard--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dashboard.svg#hover");
+  }
+
+  &-dashboard--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dashboard.svg#active");
+  }
+  &-dashboard--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dashboard.svg#active");
+  }
+
+  &-dashboard--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dashboard.svg#disabled");
+  }
+  &-dashboard--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dashboard.svg#disabled");
+  }
+    
+  // data-provider.svg
+  &-data-provider--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-provider.svg#enabled");
+  }
+  &-data-provider--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-provider.svg#enabled");
+  }
+
+  &-data-provider--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-provider.svg#hover");
+  }
+  &-data-provider--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-provider.svg#hover");
+  }
+
+  &-data-provider--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-provider.svg#active");
+  }
+  &-data-provider--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-provider.svg#active");
+  }
+
+  &-data-provider--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-provider.svg#disabled");
+  }
+  &-data-provider--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-provider.svg#disabled");
+  }
+    
+  // data-selector.svg
+  &-data-selector--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-selector.svg#enabled");
+  }
+  &-data-selector--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-selector.svg#enabled");
+  }
+
+  &-data-selector--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-selector.svg#hover");
+  }
+  &-data-selector--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-selector.svg#hover");
+  }
+
+  &-data-selector--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-selector.svg#active");
+  }
+  &-data-selector--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-selector.svg#active");
+  }
+
+  &-data-selector--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-selector.svg#disabled");
+  }
+  &-data-selector--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-selector.svg#disabled");
+  }
+    
+  // data-view.svg
+  &-data-view--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-view.svg#enabled");
+  }
+  &-data-view--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-view.svg#enabled");
+  }
+
+  &-data-view--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-view.svg#hover");
+  }
+  &-data-view--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-view.svg#hover");
+  }
+
+  &-data-view--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-view.svg#active");
+  }
+  &-data-view--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-view.svg#active");
+  }
+
+  &-data-view--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/data-view.svg#disabled");
+  }
+  &-data-view--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/data-view.svg#disabled");
+  }
+    
+  // datastore-category.svg
+  &-datastore-category--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore-category.svg#enabled");
+  }
+  &-datastore-category--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore-category.svg#enabled");
+  }
+
+  &-datastore-category--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore-category.svg#hover");
+  }
+  &-datastore-category--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore-category.svg#hover");
+  }
+
+  &-datastore-category--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore-category.svg#active");
+  }
+  &-datastore-category--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore-category.svg#active");
+  }
+
+  &-datastore-category--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore-category.svg#disabled");
+  }
+  &-datastore-category--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore-category.svg#disabled");
+  }
+    
+  // datastore.svg
+  &-datastore--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore.svg#enabled");
+  }
+  &-datastore--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore.svg#enabled");
+  }
+
+  &-datastore--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore.svg#hover");
+  }
+  &-datastore--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore.svg#hover");
+  }
+
+  &-datastore--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore.svg#active");
+  }
+  &-datastore--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore.svg#active");
+  }
+
+  &-datastore--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/datastore.svg#disabled");
+  }
+  &-datastore--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/datastore.svg#disabled");
+  }
+    
+  // dataview-index.svg
+  &-dataview-index--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dataview-index.svg#enabled");
+  }
+  &-dataview-index--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dataview-index.svg#enabled");
+  }
+
+  &-dataview-index--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dataview-index.svg#hover");
+  }
+  &-dataview-index--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dataview-index.svg#hover");
+  }
+
+  &-dataview-index--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dataview-index.svg#active");
+  }
+  &-dataview-index--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dataview-index.svg#active");
+  }
+
+  &-dataview-index--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dataview-index.svg#disabled");
+  }
+  &-dataview-index--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dataview-index.svg#disabled");
+  }
+    
+  // deployment-unit.svg
+  &-deployment-unit--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/deployment-unit.svg#enabled");
+  }
+  &-deployment-unit--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/deployment-unit.svg#enabled");
+  }
+
+  &-deployment-unit--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/deployment-unit.svg#hover");
+  }
+  &-deployment-unit--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/deployment-unit.svg#hover");
+  }
+
+  &-deployment-unit--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/deployment-unit.svg#active");
+  }
+  &-deployment-unit--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/deployment-unit.svg#active");
+  }
+
+  &-deployment-unit--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/deployment-unit.svg#disabled");
+  }
+  &-deployment-unit--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/deployment-unit.svg#disabled");
+  }
+    
+  // design.svg
+  &-design--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/design.svg#enabled");
+  }
+  &-design--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/design.svg#enabled");
+  }
+
+  &-design--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/design.svg#hover");
+  }
+  &-design--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/design.svg#hover");
+  }
+
+  &-design--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/design.svg#active");
+  }
+  &-design--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/design.svg#active");
+  }
+
+  &-design--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/design.svg#disabled");
+  }
+  &-design--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/design.svg#disabled");
+  }
+    
+  // diagram.svg
+  &-diagram--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/diagram.svg#enabled");
+  }
+  &-diagram--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/diagram.svg#enabled");
+  }
+
+  &-diagram--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/diagram.svg#hover");
+  }
+  &-diagram--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/diagram.svg#hover");
+  }
+
+  &-diagram--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/diagram.svg#active");
+  }
+  &-diagram--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/diagram.svg#active");
+  }
+
+  &-diagram--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/diagram.svg#disabled");
+  }
+  &-diagram--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/diagram.svg#disabled");
+  }
+    
+  // document-workflow.svg
+  &-document-workflow--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document-workflow.svg#enabled");
+  }
+  &-document-workflow--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document-workflow.svg#enabled");
+  }
+
+  &-document-workflow--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document-workflow.svg#hover");
+  }
+  &-document-workflow--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document-workflow.svg#hover");
+  }
+
+  &-document-workflow--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document-workflow.svg#active");
+  }
+  &-document-workflow--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document-workflow.svg#active");
+  }
+
+  &-document-workflow--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document-workflow.svg#disabled");
+  }
+  &-document-workflow--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document-workflow.svg#disabled");
+  }
+    
+  // document.svg
+  &-document--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document.svg#enabled");
+  }
+  &-document--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document.svg#enabled");
+  }
+
+  &-document--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document.svg#hover");
+  }
+  &-document--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document.svg#hover");
+  }
+
+  &-document--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document.svg#active");
+  }
+  &-document--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document.svg#active");
+  }
+
+  &-document--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/document.svg#disabled");
+  }
+  &-document--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/document.svg#disabled");
+  }
+    
+  // domain.svg
+  &-domain--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/domain.svg#enabled");
+  }
+  &-domain--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/domain.svg#enabled");
+  }
+
+  &-domain--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/domain.svg#hover");
+  }
+  &-domain--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/domain.svg#hover");
+  }
+
+  &-domain--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/domain.svg#active");
+  }
+  &-domain--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/domain.svg#active");
+  }
+
+  &-domain--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/domain.svg#disabled");
+  }
+  &-domain--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/domain.svg#disabled");
+  }
+    
+  // dso.svg
+  &-dso--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dso.svg#enabled");
+  }
+  &-dso--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dso.svg#enabled");
+  }
+
+  &-dso--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dso.svg#hover");
+  }
+  &-dso--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dso.svg#hover");
+  }
+
+  &-dso--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dso.svg#active");
+  }
+  &-dso--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dso.svg#active");
+  }
+
+  &-dso--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/dso.svg#disabled");
+  }
+  &-dso--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/dso.svg#disabled");
+  }
+    
+  // environment-no-select.svg
+  &-environment-no-select--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-no-select.svg#enabled");
+  }
+  &-environment-no-select--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-no-select.svg#enabled");
+  }
+
+  &-environment-no-select--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-no-select.svg#hover");
+  }
+  &-environment-no-select--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-no-select.svg#hover");
+  }
+
+  &-environment-no-select--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-no-select.svg#active");
+  }
+  &-environment-no-select--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-no-select.svg#active");
+  }
+
+  &-environment-no-select--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-no-select.svg#disabled");
+  }
+  &-environment-no-select--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-no-select.svg#disabled");
+  }
+    
+  // environment-select.svg
+  &-environment-select--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-select.svg#enabled");
+  }
+  &-environment-select--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-select.svg#enabled");
+  }
+
+  &-environment-select--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-select.svg#hover");
+  }
+  &-environment-select--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-select.svg#hover");
+  }
+
+  &-environment-select--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-select.svg#active");
+  }
+  &-environment-select--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-select.svg#active");
+  }
+
+  &-environment-select--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/environment-select.svg#disabled");
+  }
+  &-environment-select--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/environment-select.svg#disabled");
+  }
+    
+  // external-object.svg
+  &-external-object--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/external-object.svg#enabled");
+  }
+  &-external-object--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/external-object.svg#enabled");
+  }
+
+  &-external-object--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/external-object.svg#hover");
+  }
+  &-external-object--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/external-object.svg#hover");
+  }
+
+  &-external-object--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/external-object.svg#active");
+  }
+  &-external-object--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/external-object.svg#active");
+  }
+
+  &-external-object--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/external-object.svg#disabled");
+  }
+  &-external-object--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/external-object.svg#disabled");
+  }
+    
+  // file.svg
+  &-file--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/file.svg#enabled");
+  }
+  &-file--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/file.svg#enabled");
+  }
+
+  &-file--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/file.svg#hover");
+  }
+  &-file--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/file.svg#hover");
+  }
+
+  &-file--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/file.svg#active");
+  }
+  &-file--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/file.svg#active");
+  }
+
+  &-file--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/file.svg#disabled");
+  }
+  &-file--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/file.svg#disabled");
+  }
+    
+  // folder-open.svg
+  &-folder-open--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder-open.svg#enabled");
+  }
+  &-folder-open--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder-open.svg#enabled");
+  }
+
+  &-folder-open--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder-open.svg#hover");
+  }
+  &-folder-open--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder-open.svg#hover");
+  }
+
+  &-folder-open--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder-open.svg#active");
+  }
+  &-folder-open--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder-open.svg#active");
+  }
+
+  &-folder-open--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder-open.svg#disabled");
+  }
+  &-folder-open--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder-open.svg#disabled");
+  }
+    
+  // folder.svg
+  &-folder--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder.svg#enabled");
+  }
+  &-folder--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder.svg#enabled");
+  }
+
+  &-folder--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder.svg#hover");
+  }
+  &-folder--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder.svg#hover");
+  }
+
+  &-folder--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder.svg#active");
+  }
+  &-folder--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder.svg#active");
+  }
+
+  &-folder--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/folder.svg#disabled");
+  }
+  &-folder--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/folder.svg#disabled");
+  }
+    
+  // generator-category.svg
+  &-generator-category--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator-category.svg#enabled");
+  }
+  &-generator-category--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator-category.svg#enabled");
+  }
+
+  &-generator-category--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator-category.svg#hover");
+  }
+  &-generator-category--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator-category.svg#hover");
+  }
+
+  &-generator-category--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator-category.svg#active");
+  }
+  &-generator-category--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator-category.svg#active");
+  }
+
+  &-generator-category--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator-category.svg#disabled");
+  }
+  &-generator-category--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator-category.svg#disabled");
+  }
+    
+  // generator.svg
+  &-generator--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator.svg#enabled");
+  }
+  &-generator--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator.svg#enabled");
+  }
+
+  &-generator--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator.svg#hover");
+  }
+  &-generator--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator.svg#hover");
+  }
+
+  &-generator--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator.svg#active");
+  }
+  &-generator--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator.svg#active");
+  }
+
+  &-generator--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/generator.svg#disabled");
+  }
+  &-generator--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/generator.svg#disabled");
+  }
+    
+  // image.svg
+  &-image--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/image.svg#enabled");
+  }
+  &-image--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/image.svg#enabled");
+  }
+
+  &-image--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/image.svg#hover");
+  }
+  &-image--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/image.svg#hover");
+  }
+
+  &-image--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/image.svg#active");
+  }
+  &-image--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/image.svg#active");
+  }
+
+  &-image--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/image.svg#disabled");
+  }
+  &-image--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/image.svg#disabled");
+  }
+    
+  // knowledge-base.svg
+  &-knowledge-base--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/knowledge-base.svg#enabled");
+  }
+  &-knowledge-base--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/knowledge-base.svg#enabled");
+  }
+
+  &-knowledge-base--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/knowledge-base.svg#hover");
+  }
+  &-knowledge-base--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/knowledge-base.svg#hover");
+  }
+
+  &-knowledge-base--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/knowledge-base.svg#active");
+  }
+  &-knowledge-base--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/knowledge-base.svg#active");
+  }
+
+  &-knowledge-base--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/knowledge-base.svg#disabled");
+  }
+  &-knowledge-base--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/knowledge-base.svg#disabled");
+  }
+    
+  // lenguage.svg
+  &-lenguage--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/lenguage.svg#enabled");
+  }
+  &-lenguage--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/lenguage.svg#enabled");
+  }
+
+  &-lenguage--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/lenguage.svg#hover");
+  }
+  &-lenguage--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/lenguage.svg#hover");
+  }
+
+  &-lenguage--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/lenguage.svg#active");
+  }
+  &-lenguage--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/lenguage.svg#active");
+  }
+
+  &-lenguage--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/lenguage.svg#disabled");
+  }
+  &-lenguage--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/lenguage.svg#disabled");
+  }
+    
+  // main-object.svg
+  &-main-object--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/main-object.svg#enabled");
+  }
+  &-main-object--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/main-object.svg#enabled");
+  }
+
+  &-main-object--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/main-object.svg#hover");
+  }
+  &-main-object--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/main-object.svg#hover");
+  }
+
+  &-main-object--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/main-object.svg#active");
+  }
+  &-main-object--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/main-object.svg#active");
+  }
+
+  &-main-object--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/main-object.svg#disabled");
+  }
+  &-main-object--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/main-object.svg#disabled");
+  }
+    
+  // masterpage.svg
+  &-masterpage--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/masterpage.svg#enabled");
+  }
+  &-masterpage--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/masterpage.svg#enabled");
+  }
+
+  &-masterpage--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/masterpage.svg#hover");
+  }
+  &-masterpage--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/masterpage.svg#hover");
+  }
+
+  &-masterpage--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/masterpage.svg#active");
+  }
+  &-masterpage--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/masterpage.svg#active");
+  }
+
+  &-masterpage--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/masterpage.svg#disabled");
+  }
+  &-masterpage--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/masterpage.svg#disabled");
+  }
+    
+  // menu.svg
+  &-menu--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menu.svg#enabled");
+  }
+  &-menu--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menu.svg#enabled");
+  }
+
+  &-menu--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menu.svg#hover");
+  }
+  &-menu--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menu.svg#hover");
+  }
+
+  &-menu--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menu.svg#active");
+  }
+  &-menu--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menu.svg#active");
+  }
+
+  &-menu--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menu.svg#disabled");
+  }
+  &-menu--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menu.svg#disabled");
+  }
+    
+  // menubar.svg
+  &-menubar--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menubar.svg#enabled");
+  }
+  &-menubar--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menubar.svg#enabled");
+  }
+
+  &-menubar--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menubar.svg#hover");
+  }
+  &-menubar--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menubar.svg#hover");
+  }
+
+  &-menubar--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menubar.svg#active");
+  }
+  &-menubar--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menubar.svg#active");
+  }
+
+  &-menubar--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/menubar.svg#disabled");
+  }
+  &-menubar--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/menubar.svg#disabled");
+  }
+    
+  // mini-app.svg
+  &-mini-app--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/mini-app.svg#enabled");
+  }
+  &-mini-app--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/mini-app.svg#enabled");
+  }
+
+  &-mini-app--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/mini-app.svg#hover");
+  }
+  &-mini-app--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/mini-app.svg#hover");
+  }
+
+  &-mini-app--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/mini-app.svg#active");
+  }
+  &-mini-app--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/mini-app.svg#active");
+  }
+
+  &-mini-app--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/mini-app.svg#disabled");
+  }
+  &-mini-app--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/mini-app.svg#disabled");
+  }
+    
+  // module-open.svg
+  &-module-open--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module-open.svg#enabled");
+  }
+  &-module-open--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module-open.svg#enabled");
+  }
+
+  &-module-open--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module-open.svg#hover");
+  }
+  &-module-open--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module-open.svg#hover");
+  }
+
+  &-module-open--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module-open.svg#active");
+  }
+  &-module-open--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module-open.svg#active");
+  }
+
+  &-module-open--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module-open.svg#disabled");
+  }
+  &-module-open--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module-open.svg#disabled");
+  }
+    
+  // module.svg
+  &-module--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module.svg#enabled");
+  }
+  &-module--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module.svg#enabled");
+  }
+
+  &-module--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module.svg#hover");
+  }
+  &-module--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module.svg#hover");
+  }
+
+  &-module--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module.svg#active");
+  }
+  &-module--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module.svg#active");
+  }
+
+  &-module--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/module.svg#disabled");
+  }
+  &-module--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/module.svg#disabled");
+  }
+    
+  // notification-templates.svg
+  &-notification-templates--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/notification-templates.svg#enabled");
+  }
+  &-notification-templates--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/notification-templates.svg#enabled");
+  }
+
+  &-notification-templates--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/notification-templates.svg#hover");
+  }
+  &-notification-templates--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/notification-templates.svg#hover");
+  }
+
+  &-notification-templates--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/notification-templates.svg#active");
+  }
+  &-notification-templates--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/notification-templates.svg#active");
+  }
+
+  &-notification-templates--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/notification-templates.svg#disabled");
+  }
+  &-notification-templates--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/notification-templates.svg#disabled");
+  }
+    
+  // object.svg
+  &-object--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/object.svg#enabled");
+  }
+  &-object--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/object.svg#enabled");
+  }
+
+  &-object--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/object.svg#hover");
+  }
+  &-object--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/object.svg#hover");
+  }
+
+  &-object--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/object.svg#active");
+  }
+  &-object--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/object.svg#active");
+  }
+
+  &-object--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/object.svg#disabled");
+  }
+  &-object--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/object.svg#disabled");
+  }
+    
+  // offline-database.svg
+  &-offline-database--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/offline-database.svg#enabled");
+  }
+  &-offline-database--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/offline-database.svg#enabled");
+  }
+
+  &-offline-database--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/offline-database.svg#hover");
+  }
+  &-offline-database--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/offline-database.svg#hover");
+  }
+
+  &-offline-database--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/offline-database.svg#active");
+  }
+  &-offline-database--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/offline-database.svg#active");
+  }
+
+  &-offline-database--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/offline-database.svg#disabled");
+  }
+  &-offline-database--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/offline-database.svg#disabled");
+  }
+    
+  // orphant-document.svg
+  &-orphant-document--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/orphant-document.svg#enabled");
+  }
+  &-orphant-document--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/orphant-document.svg#enabled");
+  }
+
+  &-orphant-document--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/orphant-document.svg#hover");
+  }
+  &-orphant-document--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/orphant-document.svg#hover");
+  }
+
+  &-orphant-document--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/orphant-document.svg#active");
+  }
+  &-orphant-document--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/orphant-document.svg#active");
+  }
+
+  &-orphant-document--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/orphant-document.svg#disabled");
+  }
+  &-orphant-document--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/orphant-document.svg#disabled");
+  }
+    
+  // panel-for-sd.svg
+  &-panel-for-sd--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/panel-for-sd.svg#enabled");
+  }
+  &-panel-for-sd--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/panel-for-sd.svg#enabled");
+  }
+
+  &-panel-for-sd--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/panel-for-sd.svg#hover");
+  }
+  &-panel-for-sd--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/panel-for-sd.svg#hover");
+  }
+
+  &-panel-for-sd--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/panel-for-sd.svg#active");
+  }
+  &-panel-for-sd--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/panel-for-sd.svg#active");
+  }
+
+  &-panel-for-sd--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/panel-for-sd.svg#disabled");
+  }
+  &-panel-for-sd--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/panel-for-sd.svg#disabled");
+  }
+    
+  // patterns.svg
+  &-patterns--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/patterns.svg#enabled");
+  }
+  &-patterns--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/patterns.svg#enabled");
+  }
+
+  &-patterns--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/patterns.svg#hover");
+  }
+  &-patterns--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/patterns.svg#hover");
+  }
+
+  &-patterns--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/patterns.svg#active");
+  }
+  &-patterns--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/patterns.svg#active");
+  }
+
+  &-patterns--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/patterns.svg#disabled");
+  }
+  &-patterns--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/patterns.svg#disabled");
+  }
+    
+  // procedure.svg
+  &-procedure--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/procedure.svg#enabled");
+  }
+  &-procedure--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/procedure.svg#enabled");
+  }
+
+  &-procedure--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/procedure.svg#hover");
+  }
+  &-procedure--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/procedure.svg#hover");
+  }
+
+  &-procedure--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/procedure.svg#active");
+  }
+  &-procedure--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/procedure.svg#active");
+  }
+
+  &-procedure--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/procedure.svg#disabled");
+  }
+  &-procedure--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/procedure.svg#disabled");
+  }
+    
+  // query.svg
+  &-query--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/query.svg#enabled");
+  }
+  &-query--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/query.svg#enabled");
+  }
+
+  &-query--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/query.svg#hover");
+  }
+  &-query--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/query.svg#hover");
+  }
+
+  &-query--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/query.svg#active");
+  }
+  &-query--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/query.svg#active");
+  }
+
+  &-query--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/query.svg#disabled");
+  }
+  &-query--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/query.svg#disabled");
+  }
+    
+  // references.svg
+  &-references--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/references.svg#enabled");
+  }
+  &-references--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/references.svg#enabled");
+  }
+
+  &-references--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/references.svg#hover");
+  }
+  &-references--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/references.svg#hover");
+  }
+
+  &-references--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/references.svg#active");
+  }
+  &-references--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/references.svg#active");
+  }
+
+  &-references--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/references.svg#disabled");
+  }
+  &-references--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/references.svg#disabled");
+  }
+    
+  // report.svg
+  &-report--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/report.svg#enabled");
+  }
+  &-report--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/report.svg#enabled");
+  }
+
+  &-report--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/report.svg#hover");
+  }
+  &-report--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/report.svg#hover");
+  }
+
+  &-report--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/report.svg#active");
+  }
+  &-report--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/report.svg#active");
+  }
+
+  &-report--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/report.svg#disabled");
+  }
+  &-report--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/report.svg#disabled");
+  }
+    
+  // roles.svg
+  &-roles--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/roles.svg#enabled");
+  }
+  &-roles--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/roles.svg#enabled");
+  }
+
+  &-roles--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/roles.svg#hover");
+  }
+  &-roles--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/roles.svg#hover");
+  }
+
+  &-roles--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/roles.svg#active");
+  }
+  &-roles--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/roles.svg#active");
+  }
+
+  &-roles--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/roles.svg#disabled");
+  }
+  &-roles--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/roles.svg#disabled");
+  }
+    
+  // stencil.svg
+  &-stencil--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/stencil.svg#enabled");
+  }
+  &-stencil--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/stencil.svg#enabled");
+  }
+
+  &-stencil--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/stencil.svg#hover");
+  }
+  &-stencil--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/stencil.svg#hover");
+  }
+
+  &-stencil--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/stencil.svg#active");
+  }
+  &-stencil--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/stencil.svg#active");
+  }
+
+  &-stencil--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/stencil.svg#disabled");
+  }
+  &-stencil--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/stencil.svg#disabled");
+  }
+    
+  // structured-data-type.svg
+  &-structured-data-type--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/structured-data-type.svg#enabled");
+  }
+  &-structured-data-type--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/structured-data-type.svg#enabled");
+  }
+
+  &-structured-data-type--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/structured-data-type.svg#hover");
+  }
+  &-structured-data-type--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/structured-data-type.svg#hover");
+  }
+
+  &-structured-data-type--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/structured-data-type.svg#active");
+  }
+  &-structured-data-type--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/structured-data-type.svg#active");
+  }
+
+  &-structured-data-type--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/structured-data-type.svg#disabled");
+  }
+  &-structured-data-type--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/structured-data-type.svg#disabled");
+  }
+    
+  // subtype-group.svg
+  &-subtype-group--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/subtype-group.svg#enabled");
+  }
+  &-subtype-group--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/subtype-group.svg#enabled");
+  }
+
+  &-subtype-group--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/subtype-group.svg#hover");
+  }
+  &-subtype-group--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/subtype-group.svg#hover");
+  }
+
+  &-subtype-group--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/subtype-group.svg#active");
+  }
+  &-subtype-group--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/subtype-group.svg#active");
+  }
+
+  &-subtype-group--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/subtype-group.svg#disabled");
+  }
+  &-subtype-group--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/subtype-group.svg#disabled");
+  }
+    
+  // super-app.svg
+  &-super-app--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/super-app.svg#enabled");
+  }
+  &-super-app--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/super-app.svg#enabled");
+  }
+
+  &-super-app--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/super-app.svg#hover");
+  }
+  &-super-app--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/super-app.svg#hover");
+  }
+
+  &-super-app--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/super-app.svg#active");
+  }
+  &-super-app--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/super-app.svg#active");
+  }
+
+  &-super-app--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/super-app.svg#disabled");
+  }
+  &-super-app--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/super-app.svg#disabled");
+  }
+    
+  // table.svg
+  &-table--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/table.svg#enabled");
+  }
+  &-table--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/table.svg#enabled");
+  }
+
+  &-table--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/table.svg#hover");
+  }
+  &-table--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/table.svg#hover");
+  }
+
+  &-table--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/table.svg#active");
+  }
+  &-table--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/table.svg#active");
+  }
+
+  &-table--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/table.svg#disabled");
+  }
+  &-table--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/table.svg#disabled");
+  }
+    
+  // theme-for-sd.svg
+  &-theme-for-sd--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-for-sd.svg#enabled");
+  }
+  &-theme-for-sd--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-for-sd.svg#enabled");
+  }
+
+  &-theme-for-sd--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-for-sd.svg#hover");
+  }
+  &-theme-for-sd--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-for-sd.svg#hover");
+  }
+
+  &-theme-for-sd--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-for-sd.svg#active");
+  }
+  &-theme-for-sd--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-for-sd.svg#active");
+  }
+
+  &-theme-for-sd--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-for-sd.svg#disabled");
+  }
+  &-theme-for-sd--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-for-sd.svg#disabled");
+  }
+    
+  // theme-web.svg
+  &-theme-web--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-web.svg#enabled");
+  }
+  &-theme-web--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-web.svg#enabled");
+  }
+
+  &-theme-web--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-web.svg#hover");
+  }
+  &-theme-web--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-web.svg#hover");
+  }
+
+  &-theme-web--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-web.svg#active");
+  }
+  &-theme-web--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-web.svg#active");
+  }
+
+  &-theme-web--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme-web.svg#disabled");
+  }
+  &-theme-web--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme-web.svg#disabled");
+  }
+    
+  // theme.svg
+  &-theme--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme.svg#enabled");
+  }
+  &-theme--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme.svg#enabled");
+  }
+
+  &-theme--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme.svg#hover");
+  }
+  &-theme--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme.svg#hover");
+  }
+
+  &-theme--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme.svg#active");
+  }
+  &-theme--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme.svg#active");
+  }
+
+  &-theme--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/theme.svg#disabled");
+  }
+  &-theme--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/theme.svg#disabled");
+  }
+    
+  // to-be-defined.svg
+  &-to-be-defined--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/to-be-defined.svg#enabled");
+  }
+  &-to-be-defined--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/to-be-defined.svg#enabled");
+  }
+
+  &-to-be-defined--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/to-be-defined.svg#hover");
+  }
+  &-to-be-defined--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/to-be-defined.svg#hover");
+  }
+
+  &-to-be-defined--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/to-be-defined.svg#active");
+  }
+  &-to-be-defined--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/to-be-defined.svg#active");
+  }
+
+  &-to-be-defined--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/to-be-defined.svg#disabled");
+  }
+  &-to-be-defined--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/to-be-defined.svg#disabled");
+  }
+    
+  // transaction.svg
+  &-transaction--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/transaction.svg#enabled");
+  }
+  &-transaction--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/transaction.svg#enabled");
+  }
+
+  &-transaction--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/transaction.svg#hover");
+  }
+  &-transaction--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/transaction.svg#hover");
+  }
+
+  &-transaction--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/transaction.svg#active");
+  }
+  &-transaction--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/transaction.svg#active");
+  }
+
+  &-transaction--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/transaction.svg#disabled");
+  }
+  &-transaction--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/transaction.svg#disabled");
+  }
+    
+  // url-rewrite.svg
+  &-url-rewrite--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/url-rewrite.svg#enabled");
+  }
+  &-url-rewrite--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/url-rewrite.svg#enabled");
+  }
+
+  &-url-rewrite--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/url-rewrite.svg#hover");
+  }
+  &-url-rewrite--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/url-rewrite.svg#hover");
+  }
+
+  &-url-rewrite--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/url-rewrite.svg#active");
+  }
+  &-url-rewrite--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/url-rewrite.svg#active");
+  }
+
+  &-url-rewrite--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/url-rewrite.svg#disabled");
+  }
+  &-url-rewrite--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/url-rewrite.svg#disabled");
+  }
+    
+  // version.svg
+  &-version--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/version.svg#enabled");
+  }
+  &-version--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/version.svg#enabled");
+  }
+
+  &-version--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/version.svg#hover");
+  }
+  &-version--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/version.svg#hover");
+  }
+
+  &-version--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/version.svg#active");
+  }
+  &-version--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/version.svg#active");
+  }
+
+  &-version--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/version.svg#disabled");
+  }
+  &-version--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/version.svg#disabled");
+  }
+    
+  // web-component.svg
+  &-web-component--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/web-component.svg#enabled");
+  }
+  &-web-component--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/web-component.svg#enabled");
+  }
+
+  &-web-component--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/web-component.svg#hover");
+  }
+  &-web-component--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/web-component.svg#hover");
+  }
+
+  &-web-component--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/web-component.svg#active");
+  }
+  &-web-component--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/web-component.svg#active");
+  }
+
+  &-web-component--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/web-component.svg#disabled");
+  }
+  &-web-component--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/web-component.svg#disabled");
+  }
+    
+  // webpanel.svg
+  &-webpanel--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/webpanel.svg#enabled");
+  }
+  &-webpanel--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/webpanel.svg#enabled");
+  }
+
+  &-webpanel--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/webpanel.svg#hover");
+  }
+  &-webpanel--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/webpanel.svg#hover");
+  }
+
+  &-webpanel--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/webpanel.svg#active");
+  }
+  &-webpanel--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/webpanel.svg#active");
+  }
+
+  &-webpanel--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/webpanel.svg#disabled");
+  }
+  &-webpanel--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/webpanel.svg#disabled");
+  }
+    
+  // work-panel.svg
+  &-work-panel--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/work-panel.svg#enabled");
+  }
+  &-work-panel--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/work-panel.svg#enabled");
+  }
+
+  &-work-panel--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/work-panel.svg#hover");
+  }
+  &-work-panel--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/work-panel.svg#hover");
+  }
+
+  &-work-panel--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/work-panel.svg#active");
+  }
+  &-work-panel--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/work-panel.svg#active");
+  }
+
+  &-work-panel--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/work-panel.svg#disabled");
+  }
+  &-work-panel--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/work-panel.svg#disabled");
+  }
+    
+  // workflow.svg
+  &-workflow--enabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/workflow.svg#enabled");
+  }
+  &-workflow--enabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/workflow.svg#enabled");
+  }
+
+  &-workflow--hover-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/workflow.svg#hover");
+  }
+  &-workflow--hover-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/workflow.svg#hover");
+  }
+
+  &-workflow--active-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/workflow.svg#active");
+  }
+  &-workflow--active-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/workflow.svg#active");
+  }
+
+  &-workflow--disabled-light {
+    --icon-path: url("#{$icons-path}icons/objects/light/workflow.svg#disabled");
+  }
+  &-workflow--disabled-dark {
+    --icon-path: url("#{$icons-path}icons/objects/dark/workflow.svg#disabled");
+  }
+    
+}
+  
+
+  $all-multicolor-lists: (
+    objects: $icons-objects
+  );
+}
+
+// Base
+@mixin button-tokens() {
+  /*----------------------
+    General
+    ----------------------*/
+  //padding
+  --button__padding-block: 0;
+  --button__padding-inline: var(--mer-spacing--sm);
+  //border
+  --button__border-width: 1px;
+  --button__border-style: solid;
+  --button__border-color: transparent;
+  --button__border-radius: var(--mer-border__radius--sm);
+  //font
+  --button__font-family: inherit;
+  --button__font-size: inherit;
+  --button__font-weight: var(--mer-font__weight--semi-bold);
+  --button__letter-spacing: inherit;
+  --button__line-height: inherit;
+  --button__color: var(--mer-text__on-primary);
+  //other
+  --button__height: var(--spacing-comp-05);
+
+  /*----------------------
+    Primary
+    ----------------------*/
+  --button-primary__color: inherit;
+  --button-primary__background-color: var(--mer-accent__primary);
+  --button-primary__border-color: var(--button-primary__background-color);
+  //hover
+  --button-primary__color--hover: var(--mer-text__on-primary);
+  --button-primary__background-color--hover: var(--mer-accent__primary--hover);
+  --button-primary__border-color--hover: var(
+    --button-primary__background-color--hover
+  );
+  //active
+  --button-primary__color--active: var(--mer-text__on-primary--active);
+  --button-primary__background-color--active: var(
+    --mer-accent__primary--active
+  );
+  --button-primary__border-color--active: var(
+    --button-primary__background-color--active
+  );
+  //disabled
+  --button-primary__color--disabled: inherit;
+  --button-primary__background-color--disabled: inherit;
+  --button-primary__border-color--disabled: inherit;
+
+  /*----------------------
+    Secondary
+    ----------------------*/
+  --button-secondary__color: inherit;
+  --button-secondary__background-color: inherit;
+  --button-secondary__border-color: inherit;
+  //hover
+  --button-secondary__color--hover: inherit;
+  --button-secondary__background-color--hover: inherit;
+  --button-secondary__border-color--hover: inherit;
+  //active
+  --button-secondary__color--active: inherit;
+  --button-secondary__background-color--active: inherit;
+  --button-secondary__border-color--active: inherit;
+  //disabled
+  --button-secondary__color--disabled: inherit;
+  --button-secondary__background-color--disabled: inherit;
+  --button-secondary__border-color--disabled: inherit;
+
+  /*----------------------
+    Outlined
+    ----------------------*/
+  --button-outlined__color: inherit;
+  --button-outlined__background-color: inherit;
+  --button-outlined__border-color: inherit;
+  //hover
+  --button-outlined__color--hover: inherit;
+  --button-outlined__background-color--hover: inherit;
+  --button-outlined__border-color--hover: inherit;
+  //active
+  --button-outlined__color--active: inherit;
+  --button-outlined__background-color--active: inherit;
+  --button-outlined__border-color--active: inherit;
+  //disabled
+  --button-outlined__color--disabled: inherit;
+  --button-outlined__background-color--disabled: inherit;
+  --button-outlined__border-color--disabled: inherit;
+}
+
+//monochrome
+@mixin button-icon-style-monochrome(
+  $input-selector,
+  $output-selector,
+  $light: true,
+  $dark: true,
+  $on-surface: true,
+  $on-primary: true,
+  $on-primary-active: true
+) {
+  //light
+  @if $light {
+    #{$output-selector} {
+      @if $on-surface {
+        &--on-surface {
+          @extend #{$input-selector}--on-surface-light !optional;
+        }
+      }
+      @if $on-primary {
+        &--on-primary {
+          @extend #{$input-selector}--on-primary-light !optional;
+        }
+      }
+      @if $on-primary-active {
+        &--on-primary:active {
+          @extend #{$input-selector}--on-primary-active-light !optional;
+        }
+      }
+    }
+  }
+  //dark
+  @if $dark {
+    html.dark #{$output-selector} {
+      @if $on-surface {
+        @if $dark {
+          &--on-surface {
+            @extend #{$input-selector}--on-surface-dark !optional;
+          }
+        }
+      }
+      @if $on-primary {
+        @if $dark {
+          &--on-primary {
+            @extend #{$input-selector}--on-primary-dark !optional;
+          }
+        }
+      }
+      @if $on-primary-active {
+        @if $dark {
+          &--on-primary:active {
+            @extend #{$input-selector}--on-primary-active-dark !optional;
+          }
+        }
+      }
+    }
+  }
+}
+
+//multicolor
+@mixin button-icon-style-multicolor(
+  $input-selector,
+  $output-selector,
+  $light: true,
+  $dark: true,
+  $enabled: true,
+  $hover: true,
+  $active: true,
+  $disabled: true
+) {
+  // enabled
+  @if $enabled and $light {
+    #{$output-selector} {
+      @extend #{$input-selector}--enabled-light;
+    }
+  }
+  @if $enabled and $dark {
+    html.dark #{$output-selector} {
+      @extend #{$input-selector}--enabled-dark;
+    }
+  }
+
+  // :hover
+  @if $hover and $light {
+    #{$output-selector}:hover {
+      @extend #{$input-selector}--hover-light;
+    }
+  }
+  @if $hover and $dark {
+    html.dark #{$output-selector}:hover {
+      @extend #{$input-selector}--hover-dark;
+    }
+  }
+
+  // :active
+  @if $active and $light {
+    #{$output-selector}:active {
+      @extend #{$input-selector}--active-light;
+    }
+  }
+  @if $active and $dark {
+    html.dark #{$output-selector}:active {
+      @extend #{$input-selector}--active-dark;
+    }
+  }
+
+  // :disabled
+  @if $disabled and $light {
+    #{$output-selector}:disabled {
+      @extend #{$input-selector}--disabled-light;
+    }
+  }
+  @if $disabled and $dark {
+    html.dark #{$output-selector}:disabled {
+      @extend #{$input-selector}--disabled-dark;
+    }
+  }
+}
+
+@mixin icons-classes() {
+  // Generate monochrome icons (light and/or dark)
+  // @each $list-name, $list in $all-monochrome-lists {
+  //   @each $icon in $list {
+  //     @include button-icon-style-monochrome(
+  //       $input-selector: "%icon__#{$list-name}-#{$icon}",
+  //       $output-selector: ".icon__#{$list-name}-#{$icon}"
+  //     );
+  //   }
+  // }
+
+  //Generate multicolor icons (light and/or dark)
+  @each $list-name, $list in $all-multicolor-lists {
+    @each $icon in $list {
+      @include button-icon-style-multicolor(
+        $input-selector: "%icon__#{$list-name}-#{$icon}",
+        $output-selector: ".icon__#{$list-name}-#{$icon}"
+      );
+    }
+  }
+}
+
+
+@mixin button($with-icons) {
+  :root {
+    @include button-tokens();
+  }
+  /*----------------------
+    General button styles
+    ----------------------*/
+  .button {
+    font-family: var(--button__font-family);
+    padding-block-start: var(--button__padding-block);
+    padding-block-end: var(--button__padding-block);
+    padding-inline-start: var(--button__padding-inline);
+    padding-inline-end: var(--button__padding-inline);
+    height: var(--button__height);
+    font-weight: var(--button__font-weight);
+    color: var(--button__color);
+    border-radius: var(--button__border-radius);
+    border-width: var(--button__border-width);
+    border-style: var(--button__border-style);
+    border-color: var(--button-primary__border-color);
+  }
+
+  /*----------------------
+    Button primary
+    ----------------------*/
+  .button--primary {
+    background-color: var(--button-primary__background-color);
+
+    // hover
+    &:hover {
+      color: var(--button-primary__color--hover);
+      background-color: var(--button-primary__background-color--hover);
+      border-color: var(--button-primary__border-color--hover);
+    }
+
+    // active
+    &:active {
+      color: var(--button-primary__color--active);
+      background-color: var(--button-primary__background-color--active);
+      border-color: var(--button-primary__border-color--active);
+    }
+
+    // hover
+    &:disabled {
+    }
+  }
+}
+
+
+// Components
+@mixin checkbox-tokens() {
+  // size
+  --mer-checkbox__size: var(--mer-spacing--md);
+
+  // border
+  --mer-checkbox__border-width: var(--mer-border__width--sm);
+  --mer-checkbox__border-style: solid;
+  --mer-checkbox__border-color: var(--mer-border-color__dim);
+  --mer-checkbox__border-radius: var(--mer-border__radius--xs);
+  --mer-checkbox-check__border-color: var(--mer-border-color__neutral--active);
+
+  // background
+  --mer-checkbox__bg-color: transparent;
+}
+
+
+@mixin checkbox() {
+  :root {
+    @include checkbox-tokens();
+  }
+}
+
+@mixin shortcuts-tokens() {
+  //tooltip
+  --shortcuts-tooltip__padding-inline-start: var(--mer-spacing--2xs);
+
+  //key
+  --shortcuts-key__color: var(--mer-color__neutral-gray--900);
+  --shortcuts-key__background-color: var(--mer-color__message-red--100);
+  --shortcuts-key__border-radius: var(--mer-border__radius--md);
+  --shortcuts-key__font-size: var(--mer-font__size--xs);
+  --shortcuts-key__padding: var(--mer-spacing--2xs);
+
+  //slash
+  --shortcuts-slash__font-size: var(--mer-font__size--xs);
+  --shortcuts-slash__color: var(--mer-color__message-red--100);
+  --shortcuts-slash__padding: var(--mer-spacing--2xs);
+
+  //element
+  --shortcuts-element__outline: var(--mer-border__width--md) dotted
+    var(--mer-color__tinted-yellow--60);
+  --shortcuts-element__outline-offset: -1px;
+}
+
+
+@mixin shortcuts() {
+  ch-shortcuts {
+    &::part(tooltip) {
+      display: flex;
+      padding-inline-start: var(--shortcuts-tooltip__padding-inline-start);
+    }
+
+    &::part(key) {
+      color: var(--shortcuts-key__color);
+      background-color: var(--shortcuts-key__background-color);
+      border-radius: var(--shortcuts-key__border-radius);
+      font-size: var(--shortcuts-key__font-size);
+      padding: var(--shortcuts-key__padding);
+    }
+
+    &::part(slash),
+    &::part(plus) {
+      font-size: var(--shortcuts-slash__font-size);
+      color: var(--shortcuts-slash__color);
+      padding: var(--shortcuts-slash__padding);
+    }
+
+    &::part(element) {
+      outline: var(--shortcuts-element__outline);
+      outline-offset: var(--shortcuts-element__outline-offset);
+    }
+  }
+}
+
+@mixin tree-view-tokens() {
+  /*----------------------
+  tree-view-item
+  ----------------------*/
+
+  --tree-view-item__color: inherit;
+  --tree-view-item__font-size: inherit;
+  --tree-view-item__gap: var(--mer-spacing--xs);
+  --tree-view-item__checkbox-size: var(--mer-checkbox__size);
+  --tree-view-item-expandable-button__size: var(--mer-spacing--md);
+  --tree-view-item-image-size__: var(--mer-spacing--md);
+  --tree-view-item-custom__padding-inline-start: var(--mer-view-spacing--2xs);
+  --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs);
+
+  /*----------------------
+  tree-view-item -> Sates
+  ----------------------*/
+
+  // hover
+  --tree-view-item__color--hover: var(--mer-item__color--hover);
+  --tree-view-item__bg-color--hover: var(--mer-item__bg-color--hover);
+
+  // selected
+  --tree-view-item__color--selected: var(--mer-item__color--selected);
+  --tree-view-item__bg-color--selected: var(--mer-item__bg-color--selected);
+
+  /*----------------------
+  tree-view-item -> Parts
+  ----------------------*/
+
+  // dashed-line
+  --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface);
+  --tree-view-item-dashed-line__opacity: 0.3;
+
+  // header
+  --tree-view-item-header__border-radius: var(--mer-border__radius--sm);
+  --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs));
+
+  // downloading
+  --tree-view-item-downloading__inline-size: var(--mer-spacing--sm);
+  --tree-view-item-downloading__block-size: var(--mer-spacing--sm);
+  --tree-view-item-downloading__border-width: var(--mer-border__width--md);
+  --tree-view-item-downloading__border-style: solid;
+  --tree-view-item-downloading__border-color: var(
+    --mer-accent__primary--active
+  );
+
+  // folder & module (common)
+  --tree-view-item-folder-action__inline-size: var(--mer-spacing--md);
+  --tree-view-item-folder-action__block-size: var(--mer-spacing--md);
+
+  // pending commit
+  --tree-view-item-pending-commit__bg-color: var(--mer-accent__primary);
+
+  /*----------------------
+  tree-view-container
+  ----------------------*/
+  --tree-view-container__min-inline-size: var(max-content);
+  --tree-view-container__padding: var(--mer-spacing--xs);
+}
+
+
+@mixin tree-view() {
+  :root {
+    @include tree-view-tokens();
+  }
+
+  .tree-view {
+    /*----------------------
+    General use variables
+    ----------------------*/
+    // --ch-tree-view-item__dashed-line--inset-inline-end
+    --ch-tree-view-item-custom-padding-inline-start: 8px;
+    --ch-tree-view-item-gap: var(--tree-view-item__gap);
+    --ch-tree-view-item__checkbox-size: var(--tree-view-item__checkbox-size);
+    --ch-tree-view-item__expandable-button-size: var(
+      --tree-view-item-expandable-button__size
+    );
+    --ch-tree-view-item__image-size: var(--mer-icon-shell__size--sm);
+
+    @include mer-scrollbar;
+
+    .ch-tree-view-container {
+      padding: var(--tree-view-container__padding);
+    }
+  }
+
+  .tree-view-item {
+    font-size: var(--tree-view-item__color);
+    color: var(--tree-view-item__font-size);
+
+    /*----------------------
+    Parts
+    ----------------------*/
+
+    // checkbox (container)
+    &::part(checkbox__container) {
+      @include mer-checkbox("container");
+    }
+    // checkbox (container:focus)
+    &::part(checkbox__container):focus-within {
+      box-shadow: none;
+      @include mer-focus();
+    }
+    // checkbox (container:checked)
+    &::part(checkbox__container checkbox__checked) {
+      @include mer-checkbox("container--checked");
+    }
+    // checkbox (container:indeterminate)
+    &::part(checkbox__container checkbox__indeterminate) {
+      @include mer-checkbox("container--indeterminate");
+    }
+    // checkbox (option)
+    &::part(checkbox__option) {
+      @include mer-checkbox("option");
+    }
+    // checkbox (input)
+    &::part(checkbox__input) {
+      @include mer-checkbox("input");
+    }
+
+    // dashed-line
+    &::part(dashed-line) {
+      border-color: var(--tree-view-item-dashed-line__border-color);
+      opacity: var(--tree-view-item-dashed-line__opacity);
+    }
+
+    // header
+    &::part(header) {
+      border-radius: var(--tree-view-item-header__border-radius);
+      padding-inline-end: var(--tree-view-item-custom__padding-inline-end);
+
+      &:hover {
+        color: var(--tree-view-item__color--hover);
+        background-color: var(--tree-view-item__bg-color--hover);
+      }
+      &:focus {
+        @include mer-focus();
+      }
+    }
+    &[selected]::part(header) {
+      color: var(--tree-view-item__color--selected);
+      background-color: var(--tree-view-item__bg-color--selected);
+    }
+
+    // action
+    &::part(action) {
+      padding-block: var(--tree-view-item-header__padding-block);
+    }
+
+    // downloading
+    &::part(downloading) {
+      inline-size: var(--tree-view-item-downloading__inline-size);
+      block-size: var(--tree-view-item-downloading__block-size);
+      border-width: var(--tree-view-item-downloading__border-width);
+      border-style: var(--tree-view-item-downloading__border-style);
+      border-color: var(--tree-view-item-downloading__border-color);
+      border-inline-start-color: transparent;
+    }
+
+    /*----------------------
+    Parts -> dynamic icons
+    ----------------------*/
+
+    // folder & module (common)
+    &--folder::part(action)::before,
+    &--module::part(action)::before {
+      content: "";
+      inline-size: var(--tree-view-item-folder-action__inline-size);
+      block-size: var(--tree-view-item-folder-action__block-size);
+      background-repeat: no-repeat;
+    }
+
+    // folder
+    &--folder::part(action)::before {
+      background-image: url("../src/showcase/assets/icons/folder.svg");
+    }
+    &--folder::part(action expanded)::before {
+      background-image: url("../src/showcase/assets/icons/folder-open.svg");
+    }
+
+    // module
+    &--module::part(action)::before {
+      background-image: url("../src/showcase/assets/icons/module.svg");
+    }
+    &--module::part(action expanded)::before {
+      background-image: url("../src/showcase/assets/icons/module-open.svg");
+    }
+
+    //pending commit
+    &--pending-commit::part(action)::before {
+      content: "";
+      position: relative;
+      z-index: 1;
+      width: 5px;
+      height: 5px;
+      align-self: end;
+      margin-block-end: 3px;
+      margin-inline-start: 1px;
+      background-color: var(--tree-view-item-pending-commit__bg-color);
+      border-radius: 50%;
+    }
+  }
+
+  // TODO
+  .tree-view .ch-tree-view-drag-info {
+    padding-inline: 6px;
+    padding-block: 2px;
+    background-color: var(--mer-color__elevation--04);
+    border: 1px solid var(--ds-border-color--regular);
+    border-radius: 10px;
+    box-shadow: var(--gxg-grid-row__box-shadow--dragging);
+    font-size: 8px;
+  }
+
+  // WA to improve the style of the drops before and after
+  ch-tree-view-drop::after {
+    background-color: cyan;
+  }
+
+  /*-- Other Selectors (these depend on the tag class name)---*/
+  .ch-tree-view-item {
+    &--drag-enter {
+      background-color: yellow;
+      outline: 1px solid currentColor;
+      outline-offset: -1px;
+    }
+  }
+}
+
+
+@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();
+    }
+  }
+}