@rt-tools/ui-kit 0.0.4

package/src/lib/ui-kit/table/components/table-header-cell/table-header-cell.component.scss

@@ -0,0 +1,115 @@
+@use '../../../../../styles/base/mixin' as mixins;
+
+$header-cell: (
+    label: (
+        gap: 0.5rem,
+    ),
+    prefix: (
+        icon-size: 1.5rem,
+    ),
+    suffix: (
+        icon-size: 1.5rem,
+    ),
+    icon: (
+        margin: 0 0 0 1rem,
+        color: var(--clr-black-40),
+    ),
+    icon-active: (
+        color: var(--clr-black-100),
+    ),
+);
+
+:host {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    @each $element, $elements in $header-cell {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('table-header-cell', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    &:hover {
+        .header-cell-icons {
+            visibility: visible;
+        }
+    }
+
+    .header-cell-label {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        gap: var(--rt-table-header-cell-label-gap);
+
+        &--align {
+            &--left {
+                justify-content: flex-start;
+            }
+
+            &--center {
+                justify-content: center;
+            }
+
+            &--right {
+                justify-content: flex-end;
+            }
+        }
+
+        &__prefix {
+            width: var(--rt-table-header-cell-prefix-icon-size);
+            height: var(--rt-table-header-cell-prefix-icon-size);
+            font-size: var(--rt-table-header-cell-prefix-icon-size);
+        }
+
+        &__text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &__suffix {
+            width: var(--rt-table-header-cell-suffix-icon-size);
+            height: var(--rt-table-header-cell-suffix-icon-size);
+            font-size: var(--rt-table-header-cell-suffix-icon-size);
+        }
+
+        &__prefix,
+        &__suffix {
+            width: fit-content;
+            min-width: fit-content;
+        }
+    }
+
+    .header-cell-icons {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin: var(--rt-table-header-cell-icon-margin);
+
+        visibility: hidden;
+
+        &--active {
+            visibility: visible;
+        }
+
+        &__icon {
+            width: 0;
+            height: 0;
+            border-left: 3px solid transparent;
+            border-right: 3px solid transparent;
+            border-bottom: 5.2px solid var(--rt-table-header-cell-icon-color);
+
+            &--second {
+                margin-top: 2px;
+                transform: scaleY(-1);
+            }
+
+            &--active {
+                border-bottom-color: var(--rt-table-header-cell-icon-active-color);
+            }
+        }
+    }
+}

package/src/lib/ui-kit/table/components/table-header-filter-cell/table-header-filter-cell.component.scss

@@ -0,0 +1,11 @@
+:host {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.5rem;
+
+    .table-header-cell-filter-input {
+        width: 100%;
+    }
+}

package/src/lib/ui-kit/table/dynamic-list.component.scss

@@ -0,0 +1,6 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+}

package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss

@@ -0,0 +1,15 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: -1rem;
+
+    --rt-table-actions-container-background-color: var(--mat-sidenav-container-background-color);
+    --rt-table-row-height: 64px;
+
+    .image-cell {
+        width: 100px;
+        height: 40px;
+    }
+}

package/src/lib/ui-kit/table/stories/pagination/test-pagination-component.scss

@@ -0,0 +1,16 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: -1rem;
+    position: relative;
+    overflow: hidden;
+
+    .pagination {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}

package/src/lib/ui-kit/table/stories/table/test-table-component.scss

@@ -0,0 +1,7 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: -1rem;
+}

package/src/lib/ui-kit/toggle/rtui-toggle.component.scss

@@ -0,0 +1,174 @@
+@use '../../../styles/base/mixin' as mixins;
+
+$toggle: (
+    container: (
+        display: flex,
+        align-items: center,
+        justify-content: space-between,
+        gap: 1rem,
+    ),
+    container-disabled: (
+        opacity: 0.6,
+    ),
+    toggle: (
+        border-radius: 6.25rem,
+        background-color: var(--clr-gray-5),
+        box-shadow: inset 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.05),
+    ),
+    toggle-check: (
+        box-shadow: inset 0 0 0 1.25rem var(--clr-black-80),
+    ),
+    toggle-switch: (
+        border-radius: 2.25rem,
+        background-color: var(--clr-white-100),
+        box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2),
+    ),
+    toggle-track: (
+        background-color: var(--clr-gray-10),
+        border-radius: 2.5rem,
+        border: 0.0625rem solid var(--clr-gray-15),
+    ),
+    label: (
+        color: var(--clr-black-60),
+        font-size: 0.875rem,
+    ),
+    label-active: (
+        color: var(--clr-black-100),
+    ),
+    label-hover: (
+        color: var(--clr-black-100),
+        cursor: pointer,
+    ),
+);
+
+:host {
+    @each $element, $elements in $toggle {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('toggle', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    .rtui-toggle-container {
+        display: var(--rt-toggle-container-display);
+        align-items: var(--rt-toggle-container-align-items);
+        justify-content: var(--rt-toggle-container-justify-content);
+        gap: var(--rt-toggle-container-gap);
+
+        &--disabled {
+            opacity: var(--rt-toggle-container-disabled-opacity);
+
+            .rtui-toggle,
+            .rtui-toggle-container__label {
+                pointer-events: none;
+            }
+        }
+
+        &__label {
+            color: var(--rt-toggle-label-color);
+            font-size: var(--rt-toggle-label-font-size);
+
+            &:hover {
+                color: var(--rt-toggle-label-hover-color);
+                cursor: pointer;
+            }
+
+            &--active {
+                color: var(--rt-toggle-label-active-color);
+            }
+        }
+
+        .rtui-toggle {
+            position: relative;
+            width: 3.125rem;
+            min-width: 3.125rem;
+            height: 1.875rem;
+            border-radius: var(--rt-toggle-toggle-border-radius);
+            background-color: var(--rt-toggle-toggle-background-color);
+            overflow: hidden;
+            box-shadow: var(--rt-toggle-toggle-box-shadow);
+            cursor: pointer;
+
+            b {
+                display: block;
+            }
+
+            &__check {
+                display: none;
+
+                &:checked ~ .rtui-toggle__track {
+                    box-shadow: var(--rt-toggle-toggle-check-box-shadow);
+                }
+
+                &:checked ~ .rtui-toggle__switch {
+                    right: 0.125rem;
+                    left: 1.375rem;
+                    transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+                    transition-property: left, right;
+                    transition-delay: 0.05s, 0s;
+                }
+            }
+
+            &__switch {
+                position: absolute;
+                left: 0.125rem;
+                top: 0.125rem;
+                bottom: 0.125rem;
+                right: 1.375rem;
+                background-color: var(--rt-toggle-toggle-switch-background-color);
+                border-radius: var(--rt-toggle-toggle-switch-border-radius);
+                z-index: 1;
+                transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+                transition-property: left, right;
+                transition-delay: 0s, 0.05s;
+                box-shadow: var(--rt-toggle-toggle-switch-box-shadow);
+            }
+
+            &__track {
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+                background-color: var(--rt-toggle-toggle-track-background-color);
+                border-radius: var(--rt-toggle-toggle-track-border-radius);
+                border: var(--rt-toggle-toggle-track-border);
+            }
+
+            // modify
+            &--md {
+                width: 3rem;
+                min-width: 3rem;
+                height: 1.5rem;
+
+                .rtui-toggle {
+                    &__switch {
+                        right: 1.625rem;
+                    }
+                }
+
+                .rtui-toggle__check:checked ~ .rtui-toggle__switch {
+                    left: 1.625rem;
+                    right: 0.125rem;
+                }
+            }
+
+            &--sm {
+                width: 1.5rem;
+                min-width: 1.5rem;
+                height: 0.875rem;
+
+                .rtui-toggle {
+                    &__switch {
+                        right: 0.75rem;
+                    }
+                }
+
+                .rtui-toggle__check:checked ~ .rtui-toggle__switch {
+                    left: 0.75rem;
+                    right: 0.125rem;
+                }
+            }
+        }
+    }
+}

package/src/lib/ui-kit/toggle/stories/component/test-toggle.component.scss

@@ -0,0 +1,9 @@
+:host {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: -1rem;
+}

package/src/lib/ui-kit/toolbar/toolbar.component.scss

@@ -0,0 +1,99 @@
+@use '../../../styles/base/variables' as vars;
+@use '../../../styles/base/mixin' as mixins;
+
+$toolbar: (
+    body: (
+        height: 3rem,
+        padding: 0 1rem,
+        background-color: transparent,
+    ),
+    body-mobile: (
+        height: 3rem,
+    ),
+    bars: (
+        border-bottom-style: solid,
+        border-bottom-width: 1px,
+        border-bottom-color: var(--clr-black-20),
+    ),
+    bars-left: (
+        width: fit-content,
+    ),
+    bars-center: (
+        width: 100%,
+    ),
+    bars-right: (
+        width: fit-content,
+    ),
+);
+
+:host {
+    @each $element, $elements in $toolbar {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('toolbar', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    // hide mat tab group border bottom styles
+    --mat-tab-header-divider-height: 0;
+
+    .toolbar {
+        --mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);
+        --mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);
+
+        min-height: var(--rt-toolbar-body-mobile-height);
+        height: var(--rt-toolbar-body-mobile-height);
+
+        padding: var(--rt-toolbar-body-padding);
+        background-color: transparent;
+
+        &--sticky {
+            position: sticky;
+            top: 0;
+        }
+
+        @include mixins.media-breakpoint-up(vars.$device-sm) {
+            --mat-toolbar-standard-height: var(--rt-toolbar-body-height);
+            --mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);
+
+            height: var(--rt-toolbar-body-height);
+            min-height: var(--rt-toolbar-body-height);
+        }
+
+        .bars {
+            position: relative;
+
+            display: flex;
+            width: 100%;
+            height: 100%;
+
+            background-color: var(--rt-toolbar-body-background-color);
+
+            border-bottom-style: var(--rt-toolbar-bars-border-bottom-style);
+            border-bottom-width: var(--rt-toolbar-bars-border-bottom-width);
+            border-bottom-color: var(--rt-toolbar-bars-border-bottom-color);
+
+            &__bar {
+                &--left {
+                    width: var(--rt-toolbar-bars-left-width);
+                }
+
+                &--center {
+                    width: var(--rt-toolbar-bars-center-width);
+                    overflow: hidden;
+                }
+
+                &--right {
+                    width: var(--rt-toolbar-bars-right-width);
+                }
+
+                &--left,
+                &--center,
+                &--right {
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
+    }
+}

package/src/styles/base/_base.scss

@@ -0,0 +1,71 @@
+@use './mixin' as mixins;
+
+$palette: (
+    white: (
+        100: #ffffff,
+    ),
+    gray: (
+        5: #f5f6f8,
+        10: #e8e8e8,
+        15: #d1d1d1,
+        20: #ccc,
+    ),
+    black: (
+        10: #f3f3f3,
+        15: #eeeeee,
+        20: #e0e0e0,
+        30: #b2cbca,
+        40: #a3a3a3,
+        60: #747474,
+        80: #323033,
+        100: #181818,
+    ),
+    red: (
+        10: #fdedee,
+        20: #efc0c1,
+        40: #f7b9bb,
+        60: #e88487,
+        80: #df6064,
+        100: #eb5055,
+    ),
+    orange: (
+        5: #f6e4d9,
+        10: #e8cbbf,
+        20: #e1ba9e,
+        40: #e4a985,
+        60: #f1a05d,
+        70: #f2994a,
+        80: #ee7a34,
+        100: #ef7128,
+    ),
+    blue: (
+        20: #eaedfcff,
+        40: #b3ceef,
+        60: #6d96e8,
+        80: #4285f4,
+        100: #4284d7,
+    ),
+    green: (
+        10: #e5f8f4,
+        20: #baf4e0,
+        40: #5dbfbc,
+        60: #46c4c0,
+        80: #21b18e,
+        100: #01af8d,
+    ),
+);
+
+:root {
+    @each $family, $set in $palette {
+        @each $saturate, $clr in $set {
+            #{mixins.generateCssClrVar($family, $saturate)}: #{$clr};
+        }
+    }
+
+    --clr-base-accent: #0d1c2b;
+    --clr-txt: rgba(0, 0, 0, 0.87);
+    --clr-white-rgb: 255, 255, 255;
+
+    // Buttons
+    --rt-button-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.14);
+}

package/src/styles/base/_mixin.scss

@@ -0,0 +1,66 @@
+@use 'sass:math';
+@use './variables' as vars;
+
+// css clr var generator
+// #{generateCssVar(red, 100)}: #eb5055;
+@function generateCssClrVar($color, $saturate) {
+    @return --#{vars.$styles-clr-prefix}-#{$color}-#{$saturate};
+}
+
+// css var generator
+// #{generateCssVar(table-base-cell, suffix-icon, size)}: 1rem;
+@function generateCssVar($component-name, $element, $style-token) {
+    @return --#{vars.$styles-prefix}-#{$component-name}-#{$element}-#{$style-token};
+}
+
+// convert hex to rgb values
+// #{convert-hex-to-rgb-values(#ab2727)}: 171, 39, 39;
+@function convert-hex-to-rgb-values($hex) {
+    $r: red($hex);
+    $g: green($hex);
+    $b: blue($hex);
+
+    @return $r + ', ' + $g + ', ' + $b;
+}
+
+// px to rem
+// font-size: rem(16);
+$browser-context: 16;
+@function rem($valueRem, $context: $browser-context) {
+    @return #{math.div($valueRem, $context)}rem;
+}
+
+// media query
+// @include media-breakpoint-down($device-sm) { font-size: 1rem; }
+@mixin media-breakpoint-up($size) {
+    @media screen and (min-width: $size) {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-down($size) {
+    @media screen and (max-width: $size - 1) {
+        @content;
+    }
+}
+
+@mixin flex-column-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    white-space: nowrap;
+    clip-path: inset(100%);
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+    pointer-events: none;
+}

package/src/styles/base/_variables.scss

@@ -0,0 +1,34 @@
+/* Material Theme */
+$main-theme: light;
+
+$styles-clr-prefix: 'clr';
+$styles-prefix: 'rt';
+
+/* Base */
+$avalon-color: var(--clr-avalon);
+$base-accent: var(--clr-base-accent);
+
+/* Device Definitions */
+$device-xl: 1920px; // 120rem
+$device-lg: 1280px; // 80rem
+$device-md: 960px; // 60rem
+$device-sm: 720px; // 45rem
+$device-xs: 600px; // 37.5rem
+
+/* Fonts */
+$base-fonts: var(--font-default);
+$base-font-weight: 400;
+$base-font-size: 1rem;
+$base-text-color: var(--clr-txt);
+
+/* Colors */
+$clr-red-100: #eb5055;
+$clr-red-10: #fdedee;
+
+$clr-green-80: #00b894;
+$clr-green-10: #e5f8f4;
+
+/* Components */
+$side-panel-dynamic-clr: var(--clr-base-accent);
+$pagination-dynamic-clr: var(--clr-base-accent);
+$text-highlight-color: #0077bf;