rujira.ui 0.1.0

package/src/scss/base/_typography.scss

@@ -0,0 +1,279 @@
+@use "sass:math";
+
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;400;500&family=Inconsolata:wght@200..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+@font-face {
+  font-family: "mono";
+  src: url("./../assets/mono.woff") format("woff");
+  font-weight: 400;
+}
+
+html {
+  /* font-size: 0.875rem;
+  @media screen and (min-width: $small) {
+    font-size: 1rem;
+    } */
+  font-size: 1rem;
+}
+
+body {
+  font-family: "Montserrat", Verdana, sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-optical-sizing: auto;
+  min-height: 100dvh;
+}
+
+h1, h2, h3, h4, h5 {
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, p {
+  margin: 0;
+}
+
+.montserrat, .h1, .h2, .h3, .h4, .h5, .p {
+  font-family: "Montserrat", Verdana, sans-serif;
+}
+
+.h1, .h2, .h3 {
+  margin-bottom: 0.5em;
+}
+
+.h4, .h5, .p {
+  margin-bottom: 1em;
+}
+
+.h1 {
+  font-size: 3rem;
+  letter-spacing: -0.09375rem; //-0.03125
+  line-height: 3.75rem;
+  font-weight: 300;
+
+  @media screen and (min-width: $xsmall) {
+    font-size: 3.75rem;
+    line-height: 5rem;
+  }
+}
+
+.h2 {
+  font-size: 2.2857142857142856rem;
+  letter-spacing: -0.07142857142857142rem; //-0.03125
+  line-height: 3rem;
+  font-weight: 400;
+
+  @media screen and (min-width: $xsmall) {
+    font-size: 3rem;
+    line-height: 3.75rem;
+  }
+}
+
+.h3 {
+  font-size: 1.5rem;
+  letter-spacing: -0.046875rem; //-0.03125
+  line-height: 2rem;
+  font-weight: 400;
+
+  @media screen and (min-width: $xsmall) {
+    font-size: 2.25rem;
+    line-height: 3rem;
+  }
+}
+
+.h4 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+.h5 {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+.p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.balance {
+  text-wrap: balance;
+}
+
+.strong {
+  font-weight: 600;
+}
+
+.mono {
+  font-weight: 400;
+  font-family: "mono", monospace;
+}
+
+.condensed {
+  font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
+strong.condensed {
+  font-weight: 500;
+}
+
+.inconsolata {
+  font-family: "Inconsolata", monospace;
+}
+
+pre,
+textarea.code {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.33333333;
+  color: $grey;
+  background: #263238;
+  border-radius: 0.5rem;
+  overflow-x: scroll;
+  scrollbar-color: rgba($grey, 0.25) rgba(0, 0, 0, 0);
+  scrollbar-width: thin;
+  font-family: "Inconsolata", monospace;
+  color: $lightGrey;
+  white-space: break-spaces;
+
+  &::-webkit-scrollbar {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba($grey, 0.25);
+  }
+}
+
+textarea.code {
+  border: none;
+  resize: vertical;
+  overflow: auto;
+
+  &:focus,
+  &:active {
+    color: $white;
+    outline: none;
+    box-shadow: 0 0 0 1px rgba($grey, 0.25);
+  }
+
+  &::-webkit-resizer {
+    outline: none;
+    background-color: transparent;
+    border: 1px solid $white;
+    border-top: 0;
+    border-left: 0;
+    width: 0.25rem;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $grey;
+  }
+}
+
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+
+@for $i from 1 through 10 {
+  $px: $i * 1px;
+  .ls-#{$i} {
+    letter-spacing: $px;
+  }
+}
+
+@for $i from 10 through 90 {
+  $sz: math.div($i, 16) * 1rem;
+  .fs-#{$i} {
+    font-size: $sz;
+  }
+  .lh-#{$i} {
+  line-height: $sz;
+  }
+}
+
+@each $s, $bp in $sizes {
+  @media only screen and (min-width: $bp) {
+    .text-#{$s}-left {
+      text-align: left;
+    }
+    .text-#{$s}-center {
+      text-align: center;
+    }
+    .text-#{$s}-right {
+      text-align: right;
+    }
+
+    @for $i from 10 through 90 {
+      $sz: math.div($i, 16) * 1rem;
+      .fs-#{$s}-#{$i} {
+        font-size: $sz;
+      }
+      .lh-#{$s}-#{$i} {
+        line-height: $sz;
+      }
+    }
+  }
+}
+
+@for $i from 1 through 9 {
+  $wt: $i * 100;
+  .fw-#{$wt} {
+    font-weight: $wt;
+  }
+}
+
+.breakall {
+  word-break: break-all;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+.lowercase {
+  text-transform: lowercase;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.no-underline {
+  text-decoration: none;
+  a {
+    text-decoration: none;
+  }
+}
+
+.titlecase {
+  text-transform: capitalize;
+}

package/src/scss/base/_variables.scss

@@ -0,0 +1,72 @@
+// primary
+$primary1:  #D615EB;
+$primary2:  #8436F5;
+$primary3:  #5A2AD1;
+$primary4:  #070E50;
+$primary5:  #ECEDF2;
+$primary6:  #D9D5E2;
+
+$pink:      #D615EB;
+$purple:    #8436F5;
+
+// secondary
+$teal:      #60fbd0;
+$darkTeal:  #34aa89;
+$blue:      #1e92e6;
+$darkBlue:  #1c6599;
+$orange:    #f57c00;
+$darkOrange:#ff5722;
+$red:       #e53935;
+$darkRed:   #B71C1C;
+
+// greys
+$grey:      #71909F;
+$lightGrey: #90a4ae;
+$darkGrey:  #22242f;
+$black:     #161721;
+$deepBlack: #0c0a0f;
+$white:     #ffffff;
+
+$colors: (
+  "primary1": $primary1,
+  "primary2": $primary2,
+  "primary3": $primary3,
+  "primary4": $primary4,
+  "primary5": $primary5,
+  "primary6": $primary6,
+  "pink": $pink,
+  "purple": $purple,
+  "teal": $teal,
+  "darkTeal": $darkTeal,
+  "blue": $blue,
+  "darkBlue": $darkBlue,
+  "orange": $orange,
+  "darkOrange": $darkOrange,
+  "red": $red,
+  "darkRed": $darkRed,
+  "grey": $grey,
+  "lightGrey": $lightGrey,
+  "darkGrey": $darkGrey,
+  "black": $black,
+  "deepBlack": $deepBlack,
+  "white": $white
+);
+
+$xsmall:      420px;
+$small:       576px;
+$medium:      768px;
+$large:       1024px;
+$xl:          1440px;
+$xxl:         1680px;
+$hd:          1920px;
+$ultra:       2560px;
+
+$sizes: ("xs": $xsmall, "sm": $small, "md": $medium, "lg": $large, "xl": $xl, "xxl": $xxl, "hd": $hd, "ultra": $ultra);
+
+@mixin boxShadow {
+  box-shadow: 1px 2px 2px hsl(220deg 60% 50% / 0.2),
+    2px 4px 4px hsl(220deg 60% 50% / 0.2),
+    4px 8px 8px hsl(220deg 60% 50% / 0.2),
+    8px 16px 16px hsl(220deg 60% 50% / 0.2),
+    16px 32px 32px hsl(220deg 60% 50% / 0.2);
+}

package/src/scss/components/_button-group.scss

@@ -0,0 +1,61 @@
+.button-group {
+  display: flex;
+  font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+  
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: $white;
+  column-gap: 0.5rem;
+  
+  button {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba($grey, 0.5);
+    background: $darkGrey;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex: 1 0 auto;
+    color: inherit;
+    height: 1.5rem;
+    border-radius: 0.375rem;
+    position: relative;
+
+    &:hover:not(:disabled):not(:focus) {
+      box-shadow: 0 0 0 .125rem rgba($grey,.25);
+    }
+    
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      border-radius: 0.25rem;
+      transition: all 0.5s;
+      box-shadow: 0 0 0 0.375rem $grey;
+    }
+  
+    &:not(:disabled):active {
+      filter: brightness(1.5);
+    }
+
+    &:not(:disabled):active:after {
+      box-shadow: 0 0 0 0 $grey;
+      position: absolute;
+      left: 0;
+      top: 0;
+      opacity: 1;
+      transition: 0s;
+    }
+  }
+
+  &--no-border {
+    button {
+      border: none;
+    }
+  }
+}