fix: gitignore

.gitignore

@@ -6,8 +6,8 @@ lib
 es
 umd
 build
-styles
 docs
+./styles
 
 # Testing
 coverage

src/styles/_config.scss

@@ -0,0 +1 @@
+$prefix: "cds" !default;

src/styles/themes/_boomerang.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../_config.scss" as *;
+@use "../config" as *;
 
 /// Boomerang's default color theme
 /// @type Map

src/styles/themes/_default.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use '@carbon/themes/scss/tokens' as theme;
+
+$shell-tokens: (
+  bmrg-primary-color: #161616,
+  bmrg-secondary-color: #c0c7ce,
+  bmrg-tertiary-color: #161616,
+  bmrg-accent-color: theme.$background-brand,
+  bmrg-brand-white: #f2f4f8,
+  bmrg-header-active-background-color: theme.$background-brand,
+  bmrg-header-active-text-color: #f2f4f8,
+  bmrg-header-hover-background-color: #343a3f,
+  bmrg-header-menu-options-accent-color: #262626,
+  bmrg-header-menu-options-active-background-color: #262626,
+  bmrg-header-menu-options-top-border-color: theme.$background-brand,
+  bmrg-header-notification-default: #9fa5ad,
+  bmrg-header-notification-icon: #bb8eff,
+  bmrg-header-modal-overlay: rgba(39, 39, 39, 0.5),
+  bmrg-header-modal-cancel-color: #b9bfc7,
+  bmrg-header-modal-confirm-color: theme.$background-brand,
+  bmrg-header-modal-link-color: theme.$background-brand,
+  bmrg-header-nav-color: #161616,
+  bmrg-header-modal-background-color: #161616,
+  bmrg-header-button-text-color: theme.$text-inverse,
+  bmrg-header-attachment-background-color: #50565b,
+  bmrg-sidenav-active-background-color: #343a3f,
+);

src/styles/themes/_shell-tokens.scss

@@ -0,0 +1,24 @@
+@use '@carbon/themes/scss/tokens' as theme;
+
+$bmrg-primary-color: var(--cds-bmrg-primary-color);
+$bmrg-secondary-color: var(--cds-bmrg-secondary-color);
+$bmrg-tertiary-color: var(--cds-bmrg-tertiary-color);
+$bmrg-accent-color: var(--cds-bmrg-accent-color);
+$bmrg-brand-white: var(--cds-bmrg-brand-white);
+$bmrg-header-active-background-color: var(--cds-bmrg-header-menu-options-active-background-color);
+$bmrg-header-active-text-color: var(--cds-bmrg-header-active-text-color);
+$bmrg-header-hover-background-color: var(--cds-bmrg-header-hover-background-color);
+$bmrg-header-menu-options-accent-color: var(--cds-bmrg-header-menu-options-accent-color);
+$bmrg-header-menu-options-active-background-color: var(--cds-bmrg-header-menu-options-active-background-color);
+$bmrg-header-menu-options-top-border-color: var(--cds-bmrg-header-menu-options-top-border-color);
+$bmrg-header-notification-default: var(--cds-bmrg-header-notification-defaul);
+$bmrg-header-notification-icon: var(--cds-bmrg-header-notification-icon);
+$bmrg-header-modal-overlay: var(--cds-bmrg-header-modal-overlay);
+$bmrg-header-modal-cancel-color: var(--cds-bmrg-header-modal-cancel-color);
+$bmrg-header-modal-confirm-color: theme.$background-brand;
+$bmrg-header-modal-link-color: theme.$background-brand;
+$bmrg-header-nav-color: var(--cds-bmrg-header-nav-color);
+$bmrg-header-modal-background-color: var(--cds-bmrg-header-modal-background-color);
+$bmrg-header-button-text-color: theme.$text-inverse;
+$bmrg-header-attachment-background-color: var(--cds-bmrg-header-attachment-background-color);
+$bmrg-sidenav-active-background-color: var(--cds-bmrg-sidenav-active-background-color);

src/styles/utils/_animations.scss

@@ -0,0 +1,8 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/styles/utils/_mixins.scss

@@ -0,0 +1,60 @@
+@forward "@carbon/react/scss/utilities/convert" show em, rem;
+
+@mixin border-radius() {
+  border-radius: var(--cds-border-radius, 0);
+}
+
+@mixin button-reset() {
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 0;
+}
+
+@mixin focus-outline($color: var(--cds-button-primary), $offset: 0.125rem) {
+  outline: 0.125rem solid $color;
+  outline-offset: $offset;
+}
+
+@mixin multiline-text-overflow-ellipsis($lineClamp: 2, $orient: vertical) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: $orient;
+  -webkit-line-clamp: $lineClamp;
+}
+
+@mixin text-overflow-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+$breakpoints: (
+  xs: 500px,
+  sm: 768px,
+  md: 992px,
+  lg: 1200px,
+);
+
+@mixin breakpoint($size) {
+  @if map-has-key($breakpoints, $size) {
+    @media screen and (min-width: map-get($breakpoints, $size)) {
+      @content;
+    }
+  } @else {
+    @media (min-width: $size) {
+      @content;
+    }
+  }
+}
+
+// Create global css properties
+@mixin create-properties($token-map, $prefix: --cds) {
+  @each $name, $variable in $token-map {
+    // Only create properties for non-map objects. Some theme tokens are maps in the default themes that we merge with
+    @if type-of($variable) != map {
+      #{$prefix}-#{$name}: $variable;
+    }
+  }
+}

src/styles/utils/index.scss

@@ -0,0 +1,3 @@
+@forward "@carbon/react/scss/utilities" show em, rem;
+@forward 'animations';
+@forward 'mixins';

styles/scss/components/AboutPlatform/_aboutPlatform.scss

@@ -0,0 +1,38 @@
+@include exports('addons-bmrg-aboutPlatform') {
+  .#{$prefix}--bmrg-aboutPlatform-container {
+    .#{$prefix}--modal-container {
+      height: rem(244px);
+      width: rem(500px);
+    }
+
+    .#{$prefix}--modal-content {
+      height: 100%;
+    }
+
+    .#{$prefix}--modal-header {
+      .#{$prefix}--modal-header__label.#{$prefix}--type-delta {
+        white-space: pre;
+      }
+    }
+
+    .#{$prefix}--bmrg-aboutPlatform-footer__header {
+      color: $bmrg-brand-white;
+      margin-bottom: rem(18px);
+      margin-top: rem(16px);
+      font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      font-size: rem(14px);
+      font-weight: 500;
+      line-height: rem(18px);
+    }
+
+    .#{$prefix}--bmrg-aboutPlatform-images {
+      display: flex;
+    }
+
+    .#{$prefix}--bmrg-aboutPlatform-images__img {
+      height: 2rem;
+      margin-right: 2rem;
+      width: auto;
+    }
+  }
+}

styles/scss/components/AutoSuggest/_autoSuggest.scss

@@ -0,0 +1,53 @@
+@include exports('addons-bmrg-autoSuggest') {
+  .#{$prefix}--bmrg-auto-suggest {
+    width: 100%;
+
+    .react-autosuggest__suggestions-container {
+      background-color: $ui-01;
+      box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
+      color: $text-02;
+      max-height: 8.75rem;
+      overflow-y: auto;
+      width: 100%;
+    }
+
+    .react-autosuggest__suggestion {
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 400;
+      height: 2.5rem;
+      letter-spacing: 0.01rem;
+      line-height: 1rem;
+      overflow: hidden;
+      padding: 0.75rem 1rem;
+      position: relative;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:last-of-type {
+        &:after {
+          background-color: transparent;
+        }
+      }
+
+      &:after {
+        background-color: $ui-03;
+        bottom: 0;
+        content: '';
+        height: 0.08rem;
+        left: 1rem;
+        position: absolute;
+        width: calc(100% - 2rem);
+      }
+
+      &--highlighted {
+        color: $interactive-02;
+        background-color: $hover-ui;
+
+        &:after {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

styles/scss/components/Avatar/_avatar.scss

@@ -0,0 +1,24 @@
+@include exports('addons-bmrg-avatar') {
+  .#{$prefix}--bmrg-avatar {
+    border-radius: 50%;
+
+    &.--small {
+      height: rem(16px);
+      width: rem(16px);
+      min-height: rem(16px);
+      min-width: rem(16px);
+    }
+    &.--medium {
+      height: rem(32px);
+      width: rem(32px);
+      min-height: rem(32px);
+      min-width: rem(32px);
+    }
+    &.--large {
+      height: rem(64px);
+      width: rem(64px);
+      min-height: rem(64px);
+      min-width: rem(64px);
+    }
+  }
+}

styles/scss/components/CheckboxList/_checkboxList.scss

@@ -0,0 +1,20 @@
+@include exports('addons-bmrg-checkboxList') {
+  .#{$prefix}--bmrg-checkbox-list {
+    position: relative;
+    width: 100%;
+  }
+
+  .#{$prefix}--bmrg-checkbox-list__info {
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+
+  .#{$prefix}--bmrg-checkbox-list__title {
+    display: flex;
+  }
+
+  .#{$prefix}--bmrg-checkbox-list__tooltip {
+    margin-left: 0.5rem;
+  }
+}

styles/scss/components/ComboBox/_combobox.scss

@@ -0,0 +1,17 @@
+@include exports('addons-bmrg-select') {
+  .#{$prefix}--bmrg-select {
+    position: relative;
+    width: 100%;
+
+    &.--disableClear {
+      .#{$prefix}--list-box__selection {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--bmrg-select__tooltip {
+    line-height: 0;
+    margin-left: 0.5rem;
+  }
+}

styles/scss/components/ComboBoxMultiSelect/_comboBoxMultiSelect.scss

@@ -0,0 +1,45 @@
+@include exports('addons-bmrg-comboBoxMultiSelect') {
+  .#{$prefix}--bmrg-multi-select {
+    position: relative;
+    width: 100%;
+
+    .#{$prefix}--list-box {
+      height: fit-content;
+      max-height: fit-content;
+      min-height: 2.5rem;
+    }
+
+    .#{$prefix}--list-box__field {
+      min-height: 2.5rem;
+    }
+
+    .#{$prefix}--text-input {
+      min-height: 2.5rem;
+    }
+
+    .#{$prefix}--combo-box.#{$prefix}--list-box {
+      &:hover {
+        background: $ui-01;
+      }
+    }
+
+    &.--disableClear {
+      .#{$prefix}--list-box__selection {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--bmrg-multi-select-selected {
+    background: $ui-01;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    padding-right: 3rem;
+  }
+
+  .#{$prefix}--bmrg-multi-select__tooltip {
+    line-height: 0;
+    margin-left: 0.5rem;
+  }
+}

styles/scss/components/ConfirmModal/_confirmModal.scss

@@ -0,0 +1,6 @@
+@include exports('addons-bmrg-confirmModal') {
+  .#{$prefix}--bmrg-confirm-modal-container {
+    height: 16rem !important;
+    width: 30rem !important;
+  }
+}

styles/scss/components/Creatable/_creatable.scss

@@ -0,0 +1,42 @@
+@include exports('addons-bmrg-creatable') {
+  .#{$prefix}--bmrg-creatable {
+    position: relative;
+  }
+
+  .#{$prefix}--bmrg-creatable__input {
+    align-items: flex-start;
+    display: flex;
+  }
+
+  .#{$prefix}--bmrg-creatable__key-value-inputs {
+    align-content: center;;
+    align-items: flex-start;
+    display: flex;
+    height:100%;
+    width: 20rem;
+  }
+
+  .#{$prefix}--bmrg-creatable__colon {
+    margin: 0 0.5rem;
+  }
+
+  .#{$prefix}--bmrg-creatable__button {
+    margin-left: 1rem !important;
+    margin-top: 1.5rem;
+    &.--no-label {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .#{$prefix}--bmrg-creatable__tags {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+    width: 100%;
+  }
+
+  .#{$prefix}--bmrg-creatable__tooltip {
+    line-height: 0;
+    margin-left: 0.5rem;
+  }
+}