hrm_ui_lib 1.0.0

package/src/assets/styles/components/_button-icon.scss

@@ -0,0 +1,73 @@
+@use "../helpers/mixin";
+
+.btn-icon {
+  $this: &;
+
+  //----------- component specific tokens -------------//
+
+  --ds-button-icon-size-lg: var(--ds-size-40);
+  --ds-button-icon-size-md: var(--ds-size-32);
+  --ds-button-icon-size-sm: var(--ds-size-24);
+
+  --ds-button-icon-bg: transparent;
+  --ds-button-icon-bg-hover: var(--ds-color-bg-container-light);
+  --ds-button-icon-bg-disabled: transparent;
+  --ds-button-icon-bg-pressed: var(--ds-color-bg-container-dark);
+  --ds-button-icon-bg-focused: var(--ds-color-bg-container-light);
+
+  --ds-button-icon-border-radius-lg: var(--ds-border-radius-lg);
+  --ds-button-icon-border-radius-md: var(--ds-border-radius-md);
+  --ds-button-icon-border-radius-sm: var(--ds-border-radius-sm);
+
+  --ds-button-icon-shadow-focused: var(--ds-shadow-brand-2);
+  --ds-button-icon-transition: background-color .3s linear, color .3s linear, border-color .3s linear;
+
+  //----------//
+
+  @include mixin.flexbox;
+  @include mixin.align-items(center);
+  @include mixin.justify-content(center);
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  background-color: var(--ds-button-icon-bg);
+  color: var(--ds-button-icon-text-default);
+
+  &:not(&[disabled]) {
+    &:hover {
+      background-color: var(--ds-button-icon-bg-hover);
+    }
+
+    &:active {
+      background-color: var(--ds-button-icon-bg-pressed);
+    }
+
+    &:focus {
+      box-shadow: var(--ds-button-icon-shadow-focused);
+      background-color: var(--ds-button-icon-bg-focused);
+    }
+  }
+
+  &[disabled] {
+    cursor: default;
+    background-color: var(--ds-button-icon-bg-disabled);
+  }
+
+  &--large {
+    height: var(--ds-button-icon-size-lg);
+    width: var(--ds-button-icon-size-lg);
+    border-radius: var(--ds-button-icon-border-radius-lg);
+  }
+
+  &--medium {
+    height: var(--ds-button-icon-size-md);
+    width: var(--ds-button-icon-size-md);
+    border-radius: var(--ds-button-icon-border-radius-md);
+  }
+
+  &--small {
+    height: var(--ds-button-icon-size-sm);
+    width: var(--ds-button-icon-size-sm);
+    border-radius: var(--ds-button-icon-border-radius-sm);
+  }
+}

package/src/assets/styles/components/_button.scss

@@ -0,0 +1,423 @@
+@use "../helpers/mixin";
+
+.btn {
+  $this: &;
+
+  //----------- component specific tokens -------------//
+
+  --ds-button-size-lg: var(--ds-size-40);
+  --ds-button-size-md: var(--ds-size-32);
+  --ds-button-size-sm: var(--ds-size-24);
+
+  --ds-button-padding-lg: 0 var(--ds-space-16);
+  --ds-button-padding-md: 0 var(--ds-space-12);
+  --ds-button-padding-sm: 0 var(--ds-space-12);
+
+  --ds-button-font-size-lg: var(--ds-paragraph-std);
+  --ds-button-font-size-md: var(--ds-paragraph-std);
+  --ds-button-font-size-sm: var(--ds-paragraph-sm);
+
+  --ds-button-font-family: var(--ds-font-family);
+  --ds-button-font-weight: var(--ds-font-weight-default);
+  --ds-button-line-height: var(--ds-line-height-default);
+
+  --ds-button-primary-bg: var(--ds-color-bg-brand);
+  --ds-button-primary-bg-hover: var(--brand-300);
+  --ds-button-primary-bg-disabled: var(--ds-color-bg-disabled);
+  --ds-button-primary-bg-pressed: var(--ds-color-bg-brand-dark);
+  --ds-button-primary-bg-focused: var(--ds-color-bg-brand-darker);
+  --ds-button-primary-shadow-focused: var(--ds-shadow-brand-2);
+  --ds-button-primary-text-default: var(--ds-color-text-inverse);
+  --ds-button-primary-text-disabled: var(--ds-color-text-disabled);
+
+  --ds-button-secondary-bg: var(--ds-color-bg-white);
+  --ds-button-secondary-bg-hover: var(--ds-color-bg-container-lighter);
+  --ds-button-secondary-bg-disabled: var(--ds-color-bg-white);
+  --ds-button-secondary-bg-pressed: var(--ds-color-bg-container-light);
+  --ds-button-secondary-bg-focused: var(--ds-color-bg-container);
+  --ds-button-secondary-shadow-focused: var(--ds-shadow-brand-2);
+  --ds-button-secondary-text-default: var(--ds-color-text-primary);
+  --ds-button-secondary-text-disabled: var(--ds-color-text-disabled);
+  --ds-button-secondary-border: var(--ds-border-thin) solid var(--ds-button-secondary-border-color);
+  --ds-button-secondary-border-color: var(--ds-color-border-primary);
+  --ds-button-secondary-disabled-border-color: var(--ds-color-border-disabled);
+
+  --ds-button-tertiary-bg: transparent;
+  --ds-button-tertiary-bg-hover: var(--ds-color-bg-container-lighter);
+  --ds-button-tertiary-bg-disabled: var(--ds-color-bg-white);
+  --ds-button-tertiary-bg-pressed: var(--ds-color-bg-container-light);
+  --ds-button-tertiary-bg-focused: var(--ds-color-bg-container);
+  --ds-button-teritary-shadow-focused: var(--ds-shadow-brand-2);
+  --ds-button-tertiary-text-default: var(--ds-color-text-primary);
+  --ds-button-tertiary-text-disabled: var(--ds-color-text-disabled);
+
+  --ds-button-danger-bg: var(--ds-color-bg-danger-dark);
+  --ds-button-danger-bg-hover: var(--ds-color-bg-danger);
+  --ds-button-danger-bg-disabled: var(--ds-color-bg-disabled);
+  --ds-button-danger-bg-pressed: var(--ds-color-bg-danger-dark);
+  --ds-button-danger-bg-focused: var(--ds-color-bg-danger-darker);
+  --ds-button-danger-shadow-focused: var(--ds-shadow-danger);
+  --ds-button-danger-text-default: var(--ds-color-text-inverse);
+  --ds-button-danger-text-disabled: var(--ds-color-text-disabled);
+
+  --ds-button-text: var(--ds-color-bg-brand);
+  --ds-button-text-hover: var(--brand-300);
+  --ds-button-text-disabled: var(--ds-color-text-disabled);
+  --ds-button-text-pressed: var(--ds-color-bg-brand-dark);
+  --ds-button-text-focused: var(--ds-color-bg-brand-darker);
+  --ds-button-text-shadow-focused: var(--ds-shadow-brand-2);
+
+  --ds-button-link: var(--ds-color-bg-brand);
+  --ds-button-link-hover: var(--brand-300);
+  --ds-button-link-disabled: var(--ds-color-text-disabled);
+  --ds-button-link-pressed: var(--ds-color-bg-brand-dark);
+  --ds-button-link-focused: var(--ds-color-bg-brand-darker);
+
+  --ds-button-icon-margin-lg: var(--ds-space-8);
+  --ds-button-icon-margin-md: var(--ds-space-8);
+  --ds-button-icon-margin-sm: var(--ds-space-4);
+
+  --ds-button-border-radius-lg: var(--ds-border-radius-lg);
+  --ds-button-border-radius-md: var(--ds-border-radius-md);
+  --ds-button-border-radius-sm: var(--ds-border-radius-sm);
+
+  --ds-button-transition: background-color .3s linear, color .3s linear, border-color .3s linear;
+
+  //----------//
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: var(--ds-button-font-family);
+  font-weight: var(--ds-button-font-weight);
+  line-height: var(--ds-button-line-height);
+  //transition: var(--ds-button-transition);
+
+  &[disabled] {
+    cursor: default;
+  }
+
+  &--large {
+    height: var(--ds-button-size-lg);
+    padding: var(--ds-button-padding-lg);
+    font-size: var(--ds-button-font-size-lg);
+    border-radius: var(--ds-button-border-radius-lg);
+  }
+
+  &--medium {
+    height: var(--ds-button-size-md);
+    padding: var(--ds-button-padding-md);
+    font-size: var(--ds-button-font-size-md);
+    border-radius: var(--ds-button-border-radius-md);
+  }
+
+  &--small {
+    height: var(--ds-button-size-sm);
+    padding: var(--ds-button-padding-sm);
+    font-size: var(--ds-button-font-size-sm);
+    border-radius: var(--ds-button-border-radius-sm);
+  }
+
+  &--primary {
+    background-color: var(--ds-button-primary-bg);
+    color: var(--ds-button-primary-text-default);
+
+    &:not(#{$this}--loading) {
+      &:hover {
+        background-color: var(--ds-button-primary-bg-hover);
+      }
+
+      &:active {
+        background-color: var(--ds-button-primary-bg-pressed);
+      }
+
+      &[disabled] {
+        background-color: var(--ds-button-primary-bg-disabled);
+        color: var(--ds-button-primary-text-disabled);
+
+        #{$this}__icon {
+          color: var(--ds-button-primary-text-disabled);
+        }
+        svg path {
+          fill: var(--ds-button-danger-text-disabled);
+        }
+      }
+    }
+
+    #{$this}__icon {
+      color: var(--ds-button-primary-text-default);
+    }
+  }
+
+  &--secondary {
+    background-color: var(--ds-button-secondary-bg);
+    color: var(--ds-button-secondary-text-default);
+    border: var(--ds-button-secondary-border);
+
+    &:not(#{$this}--loading) {
+      &:hover {
+        background-color: var(--ds-button-secondary-bg-hover);
+      }
+
+      &:active {
+        background-color: var(--ds-button-secondary-bg-pressed);
+      }
+
+      &[disabled] {
+        background-color: var(--ds-button-secondary-bg-disabled);
+        color: var(--ds-button-secondary-text-disabled);
+        border-color: var(--ds-button-secondary-disabled-border-color);
+
+        #{$this}__icon {
+          color: var(--ds-button-secondary-text-disabled);
+        }
+
+        svg path {
+          fill: var(--ds-button-secondary-text-disabled);
+        }
+
+      }
+    }
+
+    #{$this}__icon {
+      color: var(--ds-button-secondary-text-default);
+    }
+  }
+
+  &--tertiary {
+    background-color: var(--ds-button-tertiary-bg);
+    color: var(--ds-button-tertiary-text-default);
+
+    &:not(#{$this}--loading) {
+      &:hover {
+        background-color: var(--ds-button-tertiary-bg-hover);
+      }
+
+      &:active {
+        background-color: var(--ds-button-tertiary-bg-pressed);
+      }
+
+      &[disabled] {
+        background-color: var(--ds-button-tertiary-bg-disabled);
+        color: var(--ds-button-tertiary-text-disabled);
+
+        #{$this}__icon {
+          color: var(--ds-button-tertiary-text-disabled);
+        }
+
+        svg path {
+          fill: var(--ds-button-secondary-text-disabled);
+        }
+      }
+    }
+
+    #{$this}__icon {
+      color: var(--ds-button-tertiary-text-default);
+    }
+  }
+
+  &--danger {
+    background-color: var(--ds-button-danger-bg);
+    color: var(--ds-button-danger-text-default);
+
+    &:not(#{$this}--loading) {
+      &:hover {
+        background-color: var(--ds-button-danger-bg-hover);
+      }
+
+      &:active {
+        background-color: var(--ds-button-danger-bg-pressed);
+      }
+
+      &[disabled] {
+        background-color: var(--ds-button-danger-bg-disabled);
+        color: var(--ds-button-danger-text-disabled);
+
+        #{$this}__icon {
+          color: var(--ds-button-danger-text-disabled);
+        }
+
+        svg path {
+          fill: var(--ds-button-secondary-text-disabled);
+        }
+      }
+    }
+
+    #{$this}__icon {
+      color: var(--ds-button-danger-text-default);
+    }
+  }
+
+  &--text {
+    padding: 0;
+    width: auto;
+    background: none;
+    color: var(--ds-button-text);
+
+    &:not(#{$this}--loading) {
+      &:hover {
+        color: var(--ds-button-text-hover);
+
+        #{$this}__icon {
+          color: var(--ds-button-text-hover);
+        }
+
+        svg path {
+          fill: var(--ds-button-text-hover);
+        }
+      }
+
+      &:active {
+        color: var(--ds-button-text-pressed);
+
+        #{$this}__icon {
+          color: var(--ds-button-text-pressed);
+        }
+
+        svg path {
+          fill: var(--ds-button-text-pressed);
+        }
+      }
+
+
+      &[disabled] {
+        color: var(--ds-button-text-disabled);
+
+        #{$this}__icon {
+          color: var(--ds-button-text-disabled);
+        }
+
+        svg path {
+          fill: var(--ds-button-text-disabled);
+        }
+      }
+    }
+
+    #{$this}__icon {
+      color: var(--ds-button-text);
+    }
+  }
+
+  &--link {
+    padding: 0;
+    width: auto;
+    height: auto;
+    background: none;
+    color: var(--ds-button-link);
+
+    &:not(#{$this}--loading) {
+      &:hover {
+        color: var(--ds-button-link-hover);
+
+        #{$this}__icon {
+          color: var(--ds-button-link-hover);
+        }
+
+        svg path {
+          fill: var(--ds-button-link-hover);
+        }
+      }
+
+      &:active {
+        color: var(--ds-button-link-pressed);
+
+        #{$this}__icon {
+          color: var(--ds-button-link-pressed);
+        }
+
+        svg path {
+          fill: var(--ds-button-link-pressed);
+        }
+      }
+
+      &[disabled] {
+        color: var(--ds-button-link-disabled);
+
+        #{$this}__icon {
+          color: var(--ds-button-link-disabled);
+        }
+
+        svg path {
+          fill: var(--ds-button-link-disabled);
+        }
+      }
+    }
+
+    #{$this}__icon {
+      color: var(--ds-button-link);
+    }
+  }
+
+
+  &--icon-left {
+    #{$this}__icon {
+      margin-left: -3px;
+    }
+
+    &#{$this}--large {
+      #{$this}__icon {
+        margin-right: var(--ds-button-icon-margin-lg);
+      }
+    }
+
+    &#{$this}--medium {
+      #{$this}__icon {
+        margin-right: var(--ds-button-icon-margin-md);
+      }
+    }
+
+    &#{$this}--small {
+      #{$this}__icon {
+        margin-right: var(--ds-button-icon-margin-sm);
+      }
+    }
+  }
+
+  &--icon-right {
+    #{$this}__icon {
+      order: 1;
+      margin-right: -3px;
+    }
+
+    &#{$this}--large {
+      #{$this}__icon {
+        margin-left: var(--ds-button-icon-margin-lg);
+      }
+    }
+
+    &#{$this}--medium {
+      #{$this}__icon {
+        margin-left: var(--ds-button-icon-margin-md);
+      }
+    }
+
+    &#{$this}--small {
+      #{$this}__icon {
+        margin-left: var(--ds-button-icon-margin-sm);
+      }
+    }
+  }
+
+  &--icon {
+    padding: 0;
+
+    &#{$this}--large {
+      width: var(--ds-button-size-lg);
+      min-width: var(--ds-button-size-lg);
+    }
+
+    &#{$this}--medium {
+      width: var(--ds-button-size-md);
+      min-width: var(--ds-button-size-md);
+    }
+
+    &#{$this}--small {
+      width: var(--ds-button-size-sm);
+      min-width: var(--ds-button-size-sm);
+    }
+  }
+}

package/src/assets/styles/components/_card-body.scss

@@ -0,0 +1,25 @@
+@use "../helpers/mixin";
+
+.card-body {
+  $this: &;
+
+  --ds-card-body-bg: var(--ds-color-bg-container-light);
+  --ds-card-body-padding: var(--ds-space-32);
+  --ds-card-body-border-radius: var(--ds-border-radius-3xl);
+
+  --ds-card-body-image-size: 200px;
+
+  background-color: var(--ds-card-body-bg);
+  padding: var(--ds-card-body-padding);
+  border-radius: var(--ds-card-body-border-radius);
+  text-align: center;
+
+  &__image {
+    @include mixin.flexbox;
+    @include mixin.align-items(center);
+    @include mixin.justify-content(center);
+    width: var(--ds-card-body-image-size);
+    height: var(--ds-card-body-image-size);
+    margin: auto;
+  }
+}

package/src/assets/styles/components/_card-item.scss

@@ -0,0 +1,35 @@
+@use "../helpers/mixin";
+
+.card-item {
+  $this: &;
+
+  --ds-card-item-bg: var(--ds-color-bg-container-light);
+  --ds-card-item-padding: var(--ds-space-12) var(--ds-space-16);
+  --ds-card-item-border-radius: var(--ds-border-radius-2xl);
+
+  --ds-card-item-image-width: var(--ds-size-40);
+  --ds-card-item-image-height: var(--ds-size-28);
+  //--ds-card-item-image-border: 1px solid var(--grey-50);
+  --ds-card-item-image-border-radius: var(--ds-border-radius-xs);
+  --ds-card-item-image-bg-default: var(--ds-color-bg-white);
+
+  @include mixin.flexbox;
+  @include mixin.align-items(center);
+  @include mixin.justify-content(space-between);
+  border-radius: var(--ds-card-item-border-radius);
+  padding: var(--ds-card-item-padding);
+  background-color: var(--ds-card-item-bg);
+
+  &__content {
+    flex: 1;
+  }
+
+  &__image {
+    width: var(--ds-card-item-image-width);
+    height: var(--ds-card-item-image-height);
+    min-width: var(--ds-card-item-image-size);
+    //border: var(--ds-card-item-image-border);
+    border-radius: var(--ds-card-item-image-border-radius);
+    background-color: var(--ds-card-item-image-bg-default);
+  }
+}

package/src/assets/styles/components/_card-select.scss

@@ -0,0 +1,96 @@
+@use "../helpers/mixin";
+
+.card-select {
+  $this: &;
+
+
+  --ds-card-select-bg-default: var(--ds-color-bg-white);
+  --ds-card-select-bg-hover: var(--ds-color-bg-container-lighter);
+  --ds-card-select-bg-active: var(--ds-color-bg-white);
+  --ds-card-select-bg-selected: var(--ds-color-bg-white);
+
+  --ds-card-select-border-color-default: var(--ds-color-border-tertiary);
+  --ds-card-select-border-color-hover: var(--ds-color-border-secondary);
+  --ds-card-select-border-color-active: var(--ds-color-border-tertiary);
+  --ds-card-select-border-color-selected: var(--ds-color-border-brand);
+  --ds-card-select-border-color-disabled: var(--ds-color-border-disabled);
+
+  --ds-card-select-border-radius: var(--ds-border-radius-2xl);
+  --ds-card-select-padding: var(--ds-space-16);
+  --ds-card-select-shadow-focused: var(--ds-shadow-brand-2);
+  --ds-card-select-shadow-selected: var(--ds-shadow-brand-1);
+
+  --ds-card-select-image-size: var(--ds-size-64);
+
+  --ds-card-select-icon-size: var(--ds-size-40);
+  --ds-card-select-icon-bg: var(--ds-color-bg-container);
+  --ds-card-select-icon-border-radius: var(--ds-border-radius-xl);
+
+  border-radius: var(--ds-card-select-border-radius);
+  padding: var(--ds-card-select-padding);
+  background-color: var(--ds-card-select-bg-default);
+  border: 1px solid var(--ds-card-select-border-color-default);
+  width: 100%;
+  @include mixin.flexbox;
+
+  &:not(&#{$this}--disabled, &#{$this}--selected) {
+    &:hover {
+      cursor: pointer;
+      border-color: var(--ds-card-select-border-color-hover);
+      background-color: var(--ds-card-select-bg-hover);
+    }
+
+    &:active {
+      border-color: var(--ds-card-select-border-color-active);
+      box-shadow: var(--ds-card-select-shadow-focused);
+      background-color: var(--ds-card-select-bg-active);
+    }
+  }
+
+  &--selected {
+    border-color: var(--ds-card-select-border-color-selected);
+    background-color: var(--ds-card-select-bg-selected);
+    box-shadow: var(--ds-card-select-shadow-selected);
+
+  }
+
+  &--disabled {
+    border-color: var(--ds-card-select-border-color-disabled);
+
+    #{$this}__image {
+      opacity: .4;
+    }
+  }
+
+  &__image {
+    width: var(--ds-card-select-image-size);
+    min-width: var(--ds-card-select-image-size);
+  }
+
+  &__icon {
+    @include mixin.flexbox;
+    @include mixin.align-items(center);
+    @include mixin.justify-content(center);
+    width: var(--ds-card-select-icon-size);
+    min-width: var(--ds-card-select-icon-size);
+    height: var(--ds-card-select-icon-size);
+    background-color: var(--ds-card-select-icon-bg);
+    border-radius: var(--ds-card-select-icon-border-radius);
+  }
+
+  &__content {
+    flex: 1;
+  }
+}
+
+.card-select-group {
+  --ds-card-select-group-space: var(--ds-space-16);
+
+  &__item {
+    margin-bottom: var(--ds-card-select-group-space);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}