@timus-networks/theme 1.0.1

package/scss/_buttons.scss

@@ -0,0 +1,160 @@
+$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

@@ -0,0 +1,159 @@
+@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

@@ -0,0 +1,7 @@
+.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

@@ -0,0 +1,14 @@
+/* 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

@@ -0,0 +1,69 @@
+
+
+$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

@@ -0,0 +1,87 @@
+$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

@@ -0,0 +1,39 @@
+
+
+$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

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

package/scss/_selectbox.scss

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

package/scss/_variables.scss

@@ -0,0 +1,16 @@
+: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;
+}