hrm_ui_lib 1.0.0

package/src/assets/styles/helpers/_classname.scss

@@ -0,0 +1,606 @@
+@use "sass:map";
+@use "sass:meta";
+@use "mixin";
+
+body {
+  font-family: var(--ds-font-family);
+}
+
+//***** font sizes *****//
+
+.fs-10 { @include mixin.font('--font-size-10'); }
+.fs-12 { @include mixin.font('--font-size-12'); }
+.fs-14 { @include mixin.font('--font-size-14'); }
+.fs-16 { @include mixin.font('--font-size-16'); }
+.fs-20 { @include mixin.font('--font-size-20'); }
+.fs-24 { @include mixin.font('--font-size-24'); }
+.fs-32 { @include mixin.font('--font-size-32'); }
+.fs-36 { @include mixin.font('--font-size-36'); }
+.fs-40 { @include mixin.font('--font-size-40'); }
+.fs-48 { @include mixin.font('--font-size-48'); }
+.fs-64 { @include mixin.font('--font-size-64'); }
+
+//***** font weight *******//
+
+.fw-400 { @include mixin.font-weight('--font-weight-400'); }
+.fw-500 { @include mixin.font-weight('--font-weight-500'); }
+.fw-600 { @include mixin.font-weight('--font-weight-600'); }
+.fw-700 { @include mixin.font-weight('--font-weight-700'); }
+
+
+//***** margin and padding *****//
+
+$space-values: (
+                0,
+                2,
+                4,
+                6,
+                8,
+                12,
+                16,
+                20,
+                24,
+                32,
+                40,
+                48,
+                56,
+                64,
+                80,
+                160,
+                240,
+                auto
+)!default;
+
+//shorthands
+$space-prefixes: (
+         m : margin,
+        mt : margin-top,
+        mr : margin-right,
+        mb : margin-bottom,
+        ml : margin-left,
+
+         p : padding,
+        pt : padding-top,
+        pr : padding-right,
+        pb : padding-bottom,
+        pl : padding-left
+) !default;
+
+@mixin make-spaces() {
+  @each $attr-short, $attr-long in $space-prefixes {
+    @each $value in $space-values {
+      .#{$attr-short}-#{$value} {
+        @if $value == 'auto' { /*add the @if loop*/
+          #{$attr-long}: #{$value};
+        } @else {
+          #{$attr-long}: #{$value}#{'px'};
+        }
+      }
+    }
+  }
+}
+
+@include make-spaces();
+
+
+//***** colors *******//
+
+.text-color {
+  &.brand {
+    @include mixin.color(brand, 'base');
+    &.clr-900 { @include mixin.color( brand, '--color-900' ) }
+    &.clr-800 { @include mixin.color( brand, '--color-800' ) }
+    &.clr-700 { @include mixin.color( brand, '--color-700' ) }
+    &.clr-600 { @include mixin.color( brand, '--color-600' ) }
+    &.clr-500 { @include mixin.color( brand, '--color-500' ) }
+    &.clr-400 { @include mixin.color( brand, '--color-400' ) }
+    &.clr-300 { @include mixin.color( brand, '--color-300' ) }
+    &.clr-200 { @include mixin.color( brand, '--color-200' ) }
+    &.clr-100 { @include mixin.color( brand, '--color-100' ) }
+    &.clr-50  { @include mixin.color( brand, '--color-50' ) }
+    &.clr-40  { @include mixin.color( brand, '--color-40' ) }
+    &.clr-30  { @include mixin.color( brand, '--color-30' ) }
+    &.clr-20  { @include mixin.color( brand, '--color-20' ) }
+  }
+  &.green {
+    @include mixin.color(green, 'base');
+    &.clr-900 { @include mixin.color( green, '--color-900' ) }
+    &.clr-800 { @include mixin.color( green, '--color-800' ) }
+    &.clr-700 { @include mixin.color( green, '--color-700' ) }
+    &.clr-600 { @include mixin.color( green, '--color-600' ) }
+    &.clr-500 { @include mixin.color( green, '--color-500' ) }
+    &.clr-400 { @include mixin.color( green, '--color-400' ) }
+    &.clr-300 { @include mixin.color( green, '--color-300' ) }
+    &.clr-200 { @include mixin.color( green, '--color-200' ) }
+    &.clr-100 { @include mixin.color( green, '--color-100' ) }
+    &.clr-50  { @include mixin.color( green, '--color-50' ) }
+  }
+  &.blue {
+    @include mixin.color(blue, 'base');
+    &.clr-900 { @include mixin.color( blue, '--color-900' ) }
+    &.clr-800 { @include mixin.color( blue, '--color-800' ) }
+    &.clr-700 { @include mixin.color( blue, '--color-700' ) }
+    &.clr-600 { @include mixin.color( blue, '--color-600' ) }
+    &.clr-500 { @include mixin.color( blue, '--color-500' ) }
+    &.clr-400 { @include mixin.color( blue, '--color-400' ) }
+    &.clr-300 { @include mixin.color( blue, '--color-300' ) }
+    &.clr-200 { @include mixin.color( blue, '--color-200' ) }
+    &.clr-100 { @include mixin.color( blue, '--color-100' ) }
+    &.clr-50  { @include mixin.color( blue, '--color-50' ) }
+  }
+  &.purple {
+    @include mixin.color(purple, 'base');
+    &.clr-900 { @include mixin.color( purple, '--color-900' ) }
+    &.clr-800 { @include mixin.color( purple, '--color-800' ) }
+    &.clr-700 { @include mixin.color( purple, '--color-700' ) }
+    &.clr-600 { @include mixin.color( purple, '--color-600' ) }
+    &.clr-500 { @include mixin.color( purple, '--color-500' ) }
+    &.clr-400 { @include mixin.color( purple, '--color-400' ) }
+    &.clr-300 { @include mixin.color( purple, '--color-300' ) }
+    &.clr-200 { @include mixin.color( purple, '--color-200' ) }
+    &.clr-100 { @include mixin.color( purple, '--color-100' ) }
+    &.clr-50  { @include mixin.color( purple, '--color-50' ) }
+  }
+  &.pink {
+    @include mixin.color(pink, 'base');
+    &.clr-900 { @include mixin.color( pink, '--color-900' ) }
+    &.clr-800 { @include mixin.color( pink, '--color-800' ) }
+    &.clr-700 { @include mixin.color( pink, '--color-700' ) }
+    &.clr-600 { @include mixin.color( pink, '--color-600' ) }
+    &.clr-500 { @include mixin.color( pink, '--color-500' ) }
+    &.clr-400 { @include mixin.color( pink, '--color-400' ) }
+    &.clr-300 { @include mixin.color( pink, '--color-300' ) }
+    &.clr-200 { @include mixin.color( pink, '--color-200' ) }
+    &.clr-100 { @include mixin.color( pink, '--color-100' ) }
+    &.clr-50  { @include mixin.color( pink, '--color-50' ) }
+  }
+  &.red {
+    @include mixin.color(red, 'base');
+    &.clr-900 { @include mixin.color( red, '--color-900' ) }
+    &.clr-800 { @include mixin.color( red, '--color-800' ) }
+    &.clr-700 { @include mixin.color( red, '--color-700' ) }
+    &.clr-600 { @include mixin.color( red, '--color-600' ) }
+    &.clr-500 { @include mixin.color( red, '--color-500' ) }
+    &.clr-400 { @include mixin.color( red, '--color-400' ) }
+    &.clr-300 { @include mixin.color( red, '--color-300' ) }
+    &.clr-200 { @include mixin.color( red, '--color-200' ) }
+    &.clr-100 { @include mixin.color( red, '--color-100' ) }
+    &.clr-50  { @include mixin.color( red, '--color-50' ) }
+  }
+  &.yellow {
+    @include mixin.color(yellow, 'base');
+    &.clr-900 { @include mixin.color( yellow, '--color-900' ) }
+    &.clr-800 { @include mixin.color( yellow, '--color-800' ) }
+    &.clr-700 { @include mixin.color( yellow, '--color-700' ) }
+    &.clr-600 { @include mixin.color( yellow, '--color-600' ) }
+    &.clr-500 { @include mixin.color( yellow, '--color-500' ) }
+    &.clr-400 { @include mixin.color( yellow, '--color-400' ) }
+    &.clr-300 { @include mixin.color( yellow, '--color-300' ) }
+    &.clr-200 { @include mixin.color( yellow, '--color-200' ) }
+    &.clr-100 { @include mixin.color( yellow, '--color-100' ) }
+    &.clr-50  { @include mixin.color( yellow, '--color-50' ) }
+  }
+  &.grey {
+    @include mixin.color(grey, 'base');
+    &.clr-900 { @include mixin.color( grey, '--color-900' ) }
+    &.clr-800 { @include mixin.color( grey, '--color-800' ) }
+    &.clr-700 { @include mixin.color( grey, '--color-700' ) }
+    &.clr-600 { @include mixin.color( grey, '--color-600' ) }
+    &.clr-500 { @include mixin.color( grey, '--color-500' ) }
+    &.clr-400 { @include mixin.color( grey, '--color-400' ) }
+    &.clr-300 { @include mixin.color( grey, '--color-300' ) }
+    &.clr-200 { @include mixin.color( grey, '--color-200' ) }
+    &.clr-100 { @include mixin.color( grey, '--color-100' ) }
+    &.clr-50  { @include mixin.color( grey, '--color-50' ) }
+    &.clr-40  { @include mixin.color( grey, '--color-40' ) }
+    &.clr-30  { @include mixin.color( grey, '--color-30' ) }
+    &.clr-20  { @include mixin.color( grey, '--color-20' ) }
+  }
+  &.white {
+    @include mixin.color(white, 'base');
+  }
+}
+
+
+//***** background color ******//
+
+.bg-color {
+  &.brand {
+    @include mixin.background-color(brand, 'base');
+    &.clr-900 { @include mixin.background-color( brand, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( brand, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( brand, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( brand, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( brand, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( brand, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( brand, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( brand, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( brand, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( brand, '--color-50' ) }
+    &.clr-40  { @include mixin.background-color( brand, '--color-40' ) }
+    &.clr-30  { @include mixin.background-color( brand, '--color-30' ) }
+    &.clr-20  { @include mixin.background-color( brand, '--color-20' ) }
+  }
+  &.green {
+    @include mixin.background-color(green, 'base');
+    &.clr-900 { @include mixin.background-color( green, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( green, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( green, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( green, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( green, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( green, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( green, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( green, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( green, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( green, '--color-50' ) }
+  }
+  &.blue {
+    @include mixin.background-color(blue, 'base');
+    &.clr-900 { @include mixin.background-color( blue, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( blue, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( blue, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( blue, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( blue, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( blue, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( blue, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( blue, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( blue, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( blue, '--color-50' ) }
+  }
+  &.purple {
+    @include mixin.background-color(purple, 'base');
+    &.clr-900 { @include mixin.background-color( purple, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( purple, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( purple, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( purple, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( purple, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( purple, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( purple, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( purple, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( purple, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( purple, '--color-50' ) }
+  }
+  &.pink {
+    @include mixin.background-color(pink, 'base');
+    &.clr-900 { @include mixin.background-color( pink, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( pink, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( pink, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( pink, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( pink, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( pink, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( pink, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( pink, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( pink, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( pink, '--color-50' ) }
+  }
+  &.red {
+    @include mixin.background-color(red, 'base');
+    &.clr-900 { @include mixin.background-color( red, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( red, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( red, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( red, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( red, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( red, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( red, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( red, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( red, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( red, '--color-50' ) }
+  }
+  &.yellow {
+    @include mixin.background-color(yellow, 'base');
+    &.clr-900 { @include mixin.background-color( yellow, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( yellow, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( yellow, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( yellow, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( yellow, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( yellow, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( yellow, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( yellow, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( yellow, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( yellow, '--color-50' ) }
+  }
+  &.grey {
+    @include mixin.background-color(grey, 'base');
+    &.clr-900 { @include mixin.background-color( grey, '--color-900' ) }
+    &.clr-800 { @include mixin.background-color( grey, '--color-800' ) }
+    &.clr-700 { @include mixin.background-color( grey, '--color-700' ) }
+    &.clr-600 { @include mixin.background-color( grey, '--color-600' ) }
+    &.clr-500 { @include mixin.background-color( grey, '--color-500' ) }
+    &.clr-400 { @include mixin.background-color( grey, '--color-400' ) }
+    &.clr-300 { @include mixin.background-color( grey, '--color-300' ) }
+    &.clr-200 { @include mixin.background-color( grey, '--color-200' ) }
+    &.clr-100 { @include mixin.background-color( grey, '--color-100' ) }
+    &.clr-50  { @include mixin.background-color( grey, '--color-50' ) }
+    &.clr-40  { @include mixin.background-color( grey, '--color-40' ) }
+    &.clr-30  { @include mixin.background-color( grey, '--color-30' ) }
+    &.clr-20  { @include mixin.background-color( grey, '--color-20' ) }
+  }
+  &.white {
+    @include mixin.color(white, 'base');
+  }
+}
+
+
+//headings
+.heading {
+  $heading-type: (
+    xlarge: var(--ds-headline-xl),
+    large: var(--ds-headline-lg),
+    medium: var(--ds-headline-md),
+    standard: var(--ds-headline-std),
+    small: var(--ds-headline-sm),
+    xsmall: var(--ds-headline-xs),
+  );
+
+  font-family: var(--ds-font-family);
+
+  @each $type, $size in $heading-type {
+    &-#{$type} {
+      font-size: $size;
+    }
+  }
+}
+
+//body text
+
+.body {
+  $body-type: (
+    large: var(--ds-paragraph-lg),
+    medium: var(--ds-paragraph-md),
+    standard: var(--ds-paragraph-std),
+    small: var(--ds-paragraph-sm),
+    xsmall: var(--ds-paragraph-xs),
+    xxsmall: var(--ds-paragraph-xs),
+  );
+
+  font-family: var(--ds-font-family);
+
+  @each $type, $size in $body-type {
+    &-#{$type} {
+      font-size: $size;
+    }
+  }
+}
+
+//weight
+
+.regular { font-weight: var(--ds-font-weight-default); }
+.semibold { font-weight: var(--ds-font-weight-active); }
+.bold { font-weight: var(--ds-font-weight-heading); }
+.bolder { font-weight: var(--ds-font-weight-strong); }
+
+//line height
+
+.lh {
+  $lineHeight-type: (
+    large: var(--ds-line-height-heading),
+    medium: var(--ds-line-height-caption),
+    small: var(--ds-line-height-tight),
+    xsmall: var(--ds-line-height-default),
+  );
+
+  @each $type, $size in $lineHeight-type {
+    &-#{$type} {
+      line-height: $size;
+    }
+  }
+}
+
+//colors
+
+.color {
+  $color-type: (
+    primary: var(--ds-color-text-primary),
+    secondary: var(--ds-color-text-secondary),
+    tertiary: var(--ds-color-text-tertiary),
+    disabled: var(--ds-color-text-disabled),
+    selected: var(--ds-color-text-selected),
+    inverse: var(--ds-color-text-inverse),
+    brand: var(--ds-color-text-brand),
+    success: var(--ds-color-text-success),
+    information: var(--ds-color-text-info),
+    warning: var(--ds-color-text-warning),
+    danger: var(--ds-color-text-danger),
+    discovery: var(--ds-color-text-discovery),
+  );
+
+  @each $type, $color in $color-type {
+    &-#{$type} {
+      color: $color;
+    }
+  }
+}
+
+
+//icons sizes
+
+.icon {
+  --icon-xxl: var(--ds-size-48);
+  --icon-xl: var(--ds-size-32);
+  --icon-lg: var(--ds-size-28);
+  --icon-md: var(--ds-size-24);
+  --icon-sm: var(--ds-size-20);
+  --icon-xs: var(--ds-size-16);
+  --icon-xxs: var(--ds-size-12);
+
+  @include mixin.flexbox;
+  @include mixin.align-items(center);
+  @include mixin.justify-content(center);
+
+  &--xxsmall {
+    font-size: var(--icon-xxs);
+  }
+  &--xsmall {
+    font-size: var(--icon-xs);
+  }
+  &--small {
+    font-size: var(--icon-sm);
+  }
+  &--medium {
+    font-size: var(--icon-md);
+  }
+  &--large {
+    font-size: var(--icon-lg);
+  }
+  &--xlarge {
+    font-size: var(--icon-xl);
+  }
+  &--xxlarge {
+    font-size: var(--icon-xxl);
+  }
+}
+
+//scroll
+
+.scrollbar {
+  overflow: hidden;
+
+  /* Works on Firefox */
+  @-moz-document url-prefix() {
+    scrollbar-width: thin;
+    scrollbar-color: var(--grey-50) transparent;
+  }
+
+  /* Works on Chrome, Edge, and Safari */
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--grey-50);
+    border-radius: var(--border-radius-100);
+
+    &:hover {
+      background-color: var(--grey-100);
+    }
+  }
+
+  &--vertical {
+    overflow-y: auto;
+
+    /* Works on Chrome, Edge, and Safari */
+    &::-webkit-scrollbar-track {
+      margin: var(--ds-space-8) 0;
+    }
+    &::-webkit-scrollbar {
+      width: var(--ds-size-4);
+    }
+  }
+
+  &--horizontal {
+    overflow-x: auto;
+
+    /* Works on Chrome, Edge, and Safari */
+    &::-webkit-scrollbar-track {
+      margin: 0 var(--ds-space-8);
+    }
+    &::-webkit-scrollbar {
+      height: var(--ds-size-4);
+    }
+  }
+}
+
+//flex
+
+.flexbox {
+  @include mixin.flexbox;
+}
+
+.flex-direction {
+  &--column {
+    @include mixin.flex-direction(column);
+  }
+  &--column-reverse {
+    @include mixin.flex-direction(column-reverse);
+  }
+  &--row {
+    @include mixin.flex-direction(row);
+  }
+  &--row-reverse {
+    @include mixin.flex-direction(row-reverse);
+  }
+}
+
+.flex-wrap {
+  &--wrap {
+    @include mixin.flex-wrap(wrap);
+  }
+  &--nowrap {
+    @include mixin.flex-wrap(nowrap);
+  }
+}
+
+.align-items {
+  &--stretch {
+    @include mixin.align-items(stretch);
+  }
+  &--start {
+    @include mixin.align-items(flex-start);
+  }
+  &--center {
+    @include mixin.align-items(center);
+  }
+  &--end {
+    @include mixin.align-items(flex-end);
+  }
+}
+
+.align-self {
+  &--auto {
+    @include mixin.align-items(auto);
+  }
+  &--start {
+    @include mixin.align-items(flex-start);
+  }
+  &--center {
+    @include mixin.align-items(center);
+  }
+  &--end {
+    @include mixin.align-items(flex-end);
+  }
+}
+
+.justify-content {
+  &--start {
+    @include mixin.justify-content(flex-start);
+  }
+  &--between {
+    @include mixin.justify-content(space-between);
+  }
+  &--around {
+    @include mixin.justify-content(space-around);
+  }
+  &--end {
+    @include mixin.justify-content(flex-end);
+  }
+  &--center {
+    @include mixin.justify-content(center);
+  }
+}
+
+//width
+
+.full-width {
+  width: 100%;
+}
+
+//text alignment
+
+.text-center {
+  text-align: center;
+}
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-justify {
+  text-align: justify;
+}
+
+//
+.text-truncate {
+  @include mixin.truncate(100%);
+}