@timus-networks/theme 1.0.8 → 1.0.10

package/scss/_buttons.scss

@@ -1,160 +0,0 @@
-$btn-config: (
-  'xs': (
-    min-width: 24px,
-    min-height: 24px,
-    padding: 0 4px,
-    font-size: 10px,
-    line-height: 10px,
-    border-radius: 3px,
-  ),
-  'sm': (
-    min-width: 32px,
-    min-height: 32px,
-    padding: 0 6px,
-    font-size: 12px,
-    line-height: 16px,
-    border-radius: 3px,
-  ),
-  'md': (
-    min-width: 36px,
-    min-height: 36px,
-    padding: 0 8px,
-    font-size: 14px,
-    line-height: 18px,
-    border-radius: 3px,
-  ),
-  'lg': (
-    min-width: 40px,
-    min-height: 40px,
-    padding: 0 12px,
-    font-size: 16px,
-    line-height: 20px,
-    border-radius: 4px,
-  ),
-  'xl': (
-    min-width: 48px,
-    min-height: 48px,
-    padding: 0 16px,
-    font-size: 18px,
-    line-height: 22px,
-    border-radius: 6px,
-  ),
-);
-$btn-font-color: white;
-$btn-bg: 500;
-$btn-border: 200;
-$btn-hover-bg: 600;
-$btn-active-bg: 700;
-
-// #### Generate Size Classes
-.btn {
-  // border-color: var(--button-border-color);
-  // background-color: var(--button-background-color);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @each $size, $value in $btn-config {
-    &-#{$size} {
-      @extend %icon-#{$size};
-      @each $prop-name, $prop-value in $value {
-        --button-#{$size}-#{$prop-name}: #{$prop-value};
-        #{$prop-name}: var(--button-#{$size}-#{$prop-name});
-      }
-    }
-  }
-}
-
-// #### Generate Color Classes
-
-@each $name, $item in $theme {
-  $name: "#{$name}";
-
-  .btn-#{$name} {
-    $light: if($name==light, var(--#{secondary}-#{600}), var(--button-font-color)); // var(--button-font-color); //
-
-    --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
-    --button-border-color: var(--#{$name}-#{500});
-    --button-hover-color: var(--button-hover-font-color);
-    --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
-    --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
-    --button-active-color: var(--button-active-font-color);
-    --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
-    --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
-    border-color: var(--button-border-color);
-    background-color: var(--button-background-color);
-    color: #{$light};
-
-    &:disabled {
-      &:not(.btn-ghost, .btn-outline) {
-        border-color: var(--button-border-color);
-        background-color: var(--button-border-color);
-      }
-    }
-
-    &-outline,
-    &-ghost {
-      --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
-      --button-border-color: var(--#{$name}-#{500});
-      --button-hover-color: var(--button-hover-font-color);
-      --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
-      --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
-      --button-active-color: var(--button-active-font-color);
-      --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
-      --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
-      border-color: var(--button-border-color);
-      color: var(--button-background-color);
-
-      &:disabled {
-        // color: #{$light};
-      }
-
-      &:hover {
-        border-color: var(--button-hover-background-color);
-        background-color: var(--button-hover-background-color);
-        color: if($name==light, var(--#{light}-#{900}), var(--button-font-color)); // var(--button-font-color);
-        // background-color: transparent;
-        @if ($name==light) {
-          background-color: var(--#{light}-#{200});
-        }
-      }
-
-      &:focus {
-        // background-color: transparent;
-        // color: var(--light-500);
-        @if ($name==light) {
-          background-color: var(--#{light}-#{200});
-        }
-      }
-
-      &:active {
-        border-color: var(--button-active-background-color);
-        color: var(--button-font-color);
-        @if ($name==light) {
-          background-color: var(--#{light}-#{300});
-        } @else {
-          background-color: var(--button-active-background-color);
-        }
-      }
-    }
-
-    &:focus {
-      // @extend :focus-visible;
-    }
-
-    &-outline {
-      border-width: 1px;
-      border-style: solid;
-      background-color: transparent;
-    }
-
-    &-ghost {
-      border-color: transparent !important;
-      background-color: transparent;
-    }
-  }
-
-  // @each $key,$value in $item {
-  //   .#{$name}-#{$key} {
-  //     background-color: #{$value};
-  //   }
-  // }
-}

package/scss/_colors.scss

@@ -1,159 +0,0 @@
-@use "sass:map";
-
-$default-color: 500;
-$prefix: '';
-$theme-colors: (
-  'cta': purple,
-  'success': green,
-  'warning': yellow,
-  'danger': red,
-);
-
-$theme: (
-  light:(
-    '100': rgba(255, 255, 255, 10%),
-    '200': rgba(255, 255, 255, 20%),
-    '300': rgba(255, 255, 255, 30%),
-    '400': rgba(255, 255, 255, 40%),
-    '500': rgba(255, 255, 255, 100%),
-    '600': rgba(255, 255, 255, 60%),
-    '700': rgba(255, 255, 255, 70%),
-    '800': rgba(255, 255, 255, 80%),
-    '900': rgba(255, 255, 255, 90%),
-  ),
-  primary: (
-    '100': #DEE2FF,
-    '200': #C3C8FF,
-    '300': #9FA4FF,
-    '400': #7E79FF,
-    '500': #6959FB,
-    '600': #5C3BF0,
-    '700': #5737D6,
-    '800': #4028AB,
-    '900': #382887,
-  ),
-  secondary: (
-    '100': #D5F6E8,
-    '200': #AEECD4,
-    '300': #7EDDBF,
-    '400': #43C49F,
-    '500': #20A987,
-    '600': #12896E,
-    '700': #0F6D5A,
-    '800': #0E5748,
-    '900': #0D473D,
-  ),
-  gray: (
-    '100': #F8F7F8,
-    '200': #F3F2F4,
-    '300': #DAD9DD,
-    '400': #C1C0C7,
-    '500': #A8A6B1,
-    '600': #8F8D9A,
-    '700': #83818F,
-    '800': #454157,
-    '900': #07021F,
-  ),
-  info: (
-    '100': #ccf0ff,
-    '200': #99e1ff,
-    '300': #66d1ff,
-    '400': #33c2ff,
-    '500': #00b3ff,
-    '600': #008fcc,
-    '700': #006b99,
-    '800': #004866,
-    '900': #002433,
-  ),
-  danger: (
-    '100': #FDE3E3,
-    '200': #FDCBCB,
-    '300': #FAA7A7,
-    '400': #F35C5C,
-    '500': #EB4848,
-    '600': #D82A2A,
-    '700': #B52020,
-    '800': #961E1E,
-    '900': #7D1F1F,
-  ),
-  success: (
-    '100': #F0F8ED,
-    '200': #D9EDD3,
-    '300': #B4DAA7,
-    '400': #8EC87B,
-    '500': #69B64F,
-    '600': #488633,
-    '700': #3A6A2B,
-    '800': #315526,
-    '900': #294621,
-  ),
-  warning: (
-    '100': #FFF5C6,
-    '200': #FFE988,
-    '300': #FFD643,
-    '400': #FFC520,
-    '500': #F9A307,
-    '600': #DD7B02,
-    '700': #B75606,
-    '800': #94410C,
-    '900': #7A370D,
-  ),
-);
-
-@function to-rgb($value) {
-  @return red($value), green($value), blue($value);
-}
-
-@each $color, $item in $theme {
-  // add to theme colors
-  $color-list: (
-      $color: map.get($item, #{$default-color}),
-    );
-  $theme-colors: map.merge($theme-colors, $color-list);
-}
-
-// set variable
-:root {
-  --bs-white-rgb: 255, 255, 255;
-  --bs-black-rgb: 0, 0, 0;
-  --bs-bg-opacity: 1;
-  @each $color, $item in $theme {
-    @each $key, $value in $item {
-       --#{$prefix}#{"#{$color}"}-#{$key}: #{$value};
-      // --#{$prefix}#{"#{$color}"}-#{$key}-rgb: #{to-rgb($value)};
-
-      .#{$prefix}#{"#{$color}"}-#{$key} {
-        // color: #{$value};
-      }
-
-      .#{$prefix}bg-#{"#{$color}"}-#{$key} {
-        // background-color: #{$value};
-      }
-
-      // .#{$name}-#{$key} {
-      //   background-color: #{$value};
-      // }
-    }
-  }
-}
-
-// Color Shade and Tint Generator
-// :root {
-//   @mixin variations($name, $color) {
-//     $percentages: (80%, 60%, 40%, 20%, 0, -20%, -40%, -60%, -80%);
-//     @each $percentage in $percentages {
-//       $i: list.index($percentages, $percentage);
-//       $variation: $color;
-//       @if $percentage > 0 {
-//         $variation: color.mix(white, $color, $percentage);
-//       }
-//       @else if $percentage < 0 {
-//         $variation: color.mix(black, $color, $percentage * -1);
-//       }
-//       --bs-#{$name}-#{$i * 100}: #{$variation};
-//     }
-//   }
-//   @each $name, $value in $colors {
-//     @include variations($name, $value);
-//   }
-// }

package/scss/_containers.scss

@@ -1,7 +0,0 @@
-.container {
-  @apply w-full px-4 mx-auto md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl;
-}
-
-.fluid {
-  @apply w-full px-4;
-}

package/scss/_element-ui.scss

@@ -1,14 +0,0 @@
-/* theme color */
-$--color-primary: #6959FB;
-$--color-secondary: #20A987;
-$--color-gray: #A8A6B1;
-$--color-info: #00b3ff;
-$--color-danger: #EB4848;
-$--color-success: #69B64F;
-$--color-warning: #F9A307;
-/* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-// @import "~element-ui/packages/theme-chalk/src/index";
-
-@import "./element-ui/index.scss";

package/scss/_fonts.scss

@@ -1,69 +0,0 @@
-
-
-$font-prefix: '';
-$font-config-d: (
-  'd1': ( font-size:5rem, line-height: 6rem, ),
-  'd2': ( font-size: 4.5rem, line-height: 5.4rem, ),
-  'd3': ( font-size: 4rem, line-height: 4.8rem, ),
-  'd4': ( font-size: 3.5rem, line-height: 4.2rem, ),
-  'd5': ( font-size: 3rem, line-height: 3.6rem, ),
-  'd6': ( font-size: 2.625rem, line-height: 3.15rem, ),
-);
-$font-config-h: (
-  h1: ( font-size: 2.5rem, line-height: 3rem, ),
-  h2: ( font-size: 2rem, line-height: 2.4rem, ),
-  h3: ( font-size: 1.75rem, line-height: 2.4rem, ),
-  h4: ( font-size: 1.5rem, line-height: 1.8125rem, ),
-  h5: ( font-size: 1.25rem, line-height: 1.5rem, ),
-  h6: ( font-size: 1rem, line-height: 1.2rem, ),
-);
-$font-config-body: (
-  'lead': ( font-size: 1.25rem, line-height: 1.875rem, letter-spacing: -0.01rem),
-  'body-16': ( font-size: 1rem, line-height: 1.75rem, ),
-  'body-14': ( font-size: 0.875rem, line-height: 1.25rem, ),
-  'body-12': ( font-size: 0.75rem, line-height: 1.25rem, ),
-  'caption-16': ( font-size: 1rem, line-height: 1rem, ),
-  'caption-14': ( font-size: 0.875rem, line-height: 0.875rem, ),
-  'caption-12': ( font-size: 0.75rem, line-height: 0.75rem, ),
-  'caption-10': ( font-size: 0.625rem, line-height: 0.625rem, ),
-  'caption-8': ( font-size: 0.5rem, line-height: 0.5rem, ),
-);
-
-%d {
-  margin: 0;
-  font-style: normal;
-  letter-spacing: -0.03rem;
-}
-
-%h {
-  margin: 0;
-  font-style: normal;
-  letter-spacing: -0.02rem;
-}
-
-@each $selector, $value in $font-config-d {
-  .#{$selector}, %#{$selector} {
-    @extend %d;
-    @each $prop-name, $prop-value in $value {
-      --#{$font-prefix}-#{$selector}-#{$prop-name}: #{$prop-value};
-      #{$prop-name}: var(--#{$font-prefix}-#{$selector}-#{$prop-name});
-    }
-  }
-}
-@each $selector, $value in $font-config-h {
-  #{$selector}, %#{$selector} {
-    @extend %h;
-    @each $prop-name, $prop-value in $value {
-      --#{$font-prefix}-#{$selector}-#{$prop-name}: #{$prop-value};
-      #{$prop-name}: var(--#{$font-prefix}-#{$selector}-#{$prop-name});
-    }
-  }
-}
-@each $selector, $value in $font-config-body {
-  .#{$selector}, %#{$selector} {
-    @each $prop-name, $prop-value in $value {
-      --#{$font-prefix}-#{$selector}-#{$prop-name}: #{$prop-value};
-      #{$prop-name}: var(--#{$font-prefix}-#{$selector}-#{$prop-name});
-    }
-  }
-}

package/scss/_icons.scss

@@ -1,87 +0,0 @@
-$icon-prefix: 'icon';
-$icon-config: (
-  'xxs': ( min-width: .75rem, min-height: .75rem, font-size: .75rem ),
-  'xs': ( min-width: 1rem, min-height: 1rem, font-size: 1rem ),
-  'sm': ( min-width: 1.25rem, min-height: 1.25rem, font-size: 1.25rem ),
-  'md': ( min-width: 1.25rem, min-height: 1.25rem, font-size: 1.25rem ),
-  'lg': ( min-width: 1.5rem, min-height: 1.5rem, font-size: 1.5rem ),
-  'xl': ( min-width: 1.5rem, min-height: 1.5rem, font-size: 1.5rem ),
-  'xxl': ( min-width: 2.5rem, min-height: 2.5rem, font-size: 2.5rem ),
-);
-
-%icon {
-  position: relative;
-  display: flex;
-  gap: 0.375rem;
-  align-items: center;
-  @each $size, $value in $icon-config {
-    &-#{$size}::before, &-#{$size}::after {
-      @each $prop-name, $prop-value in $value {
-        --#{$icon-prefix}-#{$size}-#{$prop-name}: #{$prop-value};
-        #{$prop-name}: var(--#{$icon-prefix}-#{$size}-#{$prop-name});
-      }
-    }
-  }
-
-  &::before {
-    // margin-left: -2px;
-  }
-
-  &::after {
-    // content: none;
-    // margin-right: 2px;
-  }
-
-  &-left {
-    &::before {
-      content: '';
-    }
-
-    &::after {
-      content: none;
-    }
-  }
-
-  &-right {
-    &::before {
-      content: none;
-    }
-
-    &::after {
-      // content: '';
-    }
-
-    &-outline {
-      &::before {
-        right: 0;
-      }
-    }
-  }
-}
-
-[class^='#{$icon-prefix}'], [class*=' #{$icon-prefix}'] {
-  @extend %icon;
-
-  &:empty {
-    justify-content: center;
-    margin: 0;
-    padding: 0;
-
-    &::before, &::after {
-      margin: 0;
-    }
-  }
-}
-
-@each $size, $value in $icon-config {
-  [class^='#{$icon-prefix}-#{$size}'], [class*=' #{$icon-prefix}-#{$size}'] {
-    @extend %icon-#{$size};
-  }
-}
-[class^='#{$icon-prefix}-right'], [class*=' #{$icon-prefix}-right'] {
-  @extend %icon-right;
-}
-
-[class^='#{$icon-prefix}-left'], [class*=' #{$icon-prefix}-left'] {
-  @extend %icon-left;
-}

package/scss/_inputs.scss

@@ -1,39 +0,0 @@
-
-
-$input-config: (
-  'xs': ( min-height: 24px, padding: 0 4px, font-size: 10px, line-height: 10px ),
-  'sm': ( min-height: 32px, padding: 0 6px, font-size: 12px, line-height: 16px ),
-  'md': ( min-height: 36px, padding: 0 8px, font-size: 12px, line-height: 18px ),
-  'lg': ( min-height: 40px, padding: 0 12px, font-size: 14px, line-height: 20px ),
-  'xl': ( min-height: 48px, padding: 0 16px, font-size: 16px, line-height: 22px ),
-);
-
-// #### Generate Size Classes
-.form-control {
-  border: 1px solid var(--brand-100);
-  border-radius: 4px;
-  color: var(--secondary-500);
-  font-family: var(--font-family);
-  font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @each $size, $value in $input-config {
-    &-#{$size} {
-      @extend %icon-#{$size};
-      @each $prop-name, $prop-value in $value {
-        --btn-#{$size}-#{$prop-name}: #{$prop-value};
-        #{$prop-name}: var(--btn-#{$size}-#{$prop-name});
-      }
-    }
-  }
-
-  &:focus-visible {
-    border: 1px solid var(--brand-300);
-    color: var(--secondary-500);
-    // @extend :focus-visible;
-  }
-}
-
-.form-check-input {
-  margin-top: 0;
-}

package/scss/_layers.scss

@@ -1,9 +0,0 @@
-// @layer components {
-//   @import 'colors';
-//   @import 'containers';
-//   @import 'fonts';
-//   @import 'icons';
-//   @import 'buttons.scss';
-//   @import 'inputs.scss';
-//   @import 'selectbox.scss';
-// }

package/scss/_selectbox.scss

@@ -1,4 +0,0 @@
-select {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/scss/_variables.scss

@@ -1,16 +0,0 @@
-:root {
-  --font-family: 'Rubik', 'Inter', 'Poppins', 'Quicksand', sans-serif;
-  --font-size: 1em;
-  --border-width: 1px;
-  --border-style: solid;
-  --border-radius: 4px;
-  --border-color: var(--secondary-100);
-  --body-color: var(--secondary-500);
-  --text-opacity: 1;
-  --button-font-color: white;
-  --button-font-family: var(--font-family);
-  --button-font-weight: 500;
-  --button-border-radius: var(--border-radius);
-  --button-hover-font-color: white;
-  --button-active-font-color: white;
-}