@newtonschool/grauity 0.0.1

package/ui/css/colors.scss

@@ -0,0 +1,131 @@
+$neutral-0: #FFFFFF;
+$neutral-100: #F9FAFB;
+$neutral-200: #F0F2F4;
+$neutral-300: #E8EAEE;
+$neutral-400: #D9DCE3;
+$neutral-500: #C4C9D4;
+$neutral-600: #A4ACBC;
+$neutral-700: #7B879D;
+$neutral-800: #576175;
+$neutral-900: #2B303B;
+$neutral-1000: #16181D;
+
+$blue-0: #E5F0FF;
+$blue-100: #CCE0FF;
+$blue-200: #B3D1FF;
+$blue-300: #99C2FF;
+$blue-400: #80B2FF;
+$blue-500: #66A3FF;
+$blue-600: #0066FF;
+$blue-700: #005CE5;
+$blue-800: #0052CC;
+$blue-900: #0047B2;
+
+$red-0: #FCF2F4;
+$red-100: #F8DDE2;
+$red-200: #F4CDD3;
+$red-300: #EDABB6;
+$red-400: #E68999;
+$red-500: #E06C7F;
+$red-600: #D22D48;
+$red-700: #BD2841;
+$red-800: #A8243A;
+$red-900: #931F33;
+
+
+$green-0: #EAFBF5;
+$green-100: #D5F6EB;
+$green-200: #C0F2E1;
+$green-300: #A2EBD3;
+$green-400: #7DE3C1;
+$green-500: #57DBAF;
+$green-600: #28BD8C;
+$green-700: #24A87C;
+$green-800: #1F936D;
+$green-900: #1B7E5D;
+
+
+$orange-0: #FDF3ED;
+$orange-100: #FBE7DA;
+$orange-200: #F8D5BF;
+$orange-300: #F5C6A8;
+$orange-400: #F2B38C;
+$orange-500: #EE9863;
+$orange-600: #E87730;
+$orange-700: #D6651F;
+$orange-800: #B65A20;
+$orange-900: #93491A;
+
+
+$yellow-0: #FEF5E7;
+$yellow-100: #FBE1B6;
+$yellow-200: #F8C777;
+$yellow-300: #F6B44C;
+$yellow-400: #EF9D1A;
+$yellow-500: #D0850B;
+$yellow-600: #B37209;
+
+
+$purple-0: #EEE6FF;
+$purple-100: #D6C2FF;
+$purple-200: #BB99FF;
+$purple-300: #9661FF;
+$purple-400: #713CDD;
+$purple-500: #5220B6;
+$purple-600: #41198F;
+
+.grauity-init {
+    --icon-color-white: #{$neutral-0};
+    --icon-color-black: #{
+        $neutral-900
+    };
+    --icon-color-grey: #{
+        $neutral-800
+    };
+    --icon-color-blue: #{
+        $blue-600
+    };
+    --icon-color-red: #{
+        $red-600
+    };
+    --icon-color-green: #{
+        $green-700
+    };
+    --icon-color-orange: #{
+        $orange-700
+    };
+    --icon-color-yellow: #{
+        $yellow-600
+    };
+    --icon-color-purple: #{
+        $purple-600
+    };
+
+    --disabled-icon-color-white: #{
+        $neutral-0
+    };
+    --disabled-icon-color-black: #{
+        $neutral-900
+    };
+    --disabled-icon-color-grey: #{
+        $neutral-700
+    };
+    --disabled-icon-color-blue: #{
+        $blue-400
+    };
+    --disabled-icon-color-red: #{
+        $red-300
+    };
+    --disabled-icon-color-green: #{
+        $green-400
+    };
+    --disabled-icon-color-orange: #{
+        $orange-400
+    };
+    --disabled-icon-color-yellow: #{
+        $yellow-400
+    };
+    --disabled-icon-color-purple: #{
+        $purple-400
+    };
+}

package/ui/css/fonts.scss

@@ -0,0 +1,17 @@
+@use "sass:math";
+
+@font-face {
+    font-family: 'Switzer';
+    font-weight: 100 900;
+    src: url('fonts/Switzer-Variable.ttf') format("truetype-variations");
+}
+
+.grauity-init {
+    font-family: 'Switzer', sans-serif;
+
+    @for $i from 1 through 10 {
+        .font-size-#{4 * $i} {
+            font-size: calc(var(--multiplier) * #{math.div((4 * $i), 16)}em);
+        }
+    }
+}

package/ui/css/icons.scss

@@ -0,0 +1,92 @@
+@use "sass:math";
+
+$icon-colors: "white", "black", "grey", "blue", "red", "green", "orange", "yellow", "purple";
+$icon-sizes: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40;
+
+.grauity-init .grauity-icon {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 0.1em;
+    width: 1em;
+    backface-visibility: hidden;
+    speak: none;
+    text-decoration: inherit;
+    opacity: 1;
+    text-align: center;
+
+    @each $color in $icon-colors {
+        &.#{$color} {
+            color: var(--icon-color-#{$color});
+
+            &.bordered, &.circular {
+                -webkit-box-shadow: 0 0 0 0.1em var(--icon-color-#{$color}) inset;
+                box-shadow: 0 0 0 0.1em var(--icon-color-#{$color}) inset;
+
+                &.inverted {
+                    color: var(--icon-color-white);
+                    background-color: var(--icon-color-#{$color});
+                }
+            }
+
+            &.disabled {
+                color: var(--disabled-icon-color-#{$color});
+
+                &.bordered, &.circular {
+                    -webkit-box-shadow: 0 0 0 0.1em var(--disabled-icon-color-#{$color}) inset;
+                    box-shadow: 0 0 0 0.1em var(--disabled-icon-color-#{$color}) inset;
+
+                    &.inverted {
+                        color: var(--disabled-icon-color-white);
+                        background-color: var(--disabled-icon-color-#{$color});
+                    }
+                }
+            }
+        }
+    }
+
+    @each $size in $icon-sizes {
+        &.size-#{$size} {
+            font-size: calc(var(--multiplier) * #{math.div($size, 16)}em);
+        }
+    }
+
+    &.loading {
+        animation: icon-loading 2s linear infinite;
+        -webkit-animation: icon-loading 2s linear infinite;
+    }
+
+    &.fitted {
+        width: auto;
+        margin: 0 !important;
+    }
+
+    &.horizontally-flipped {
+        transform: scaleX(-1);
+    }
+
+    &.vertically-flipped {
+        transform: scaleY(-1);
+    }
+
+    &.clockwise-rotated {
+        transform: rotate(90deg);
+    }
+
+    &.counterclockwise-rotated {
+        transform: rotate(-90deg);
+    }
+
+    &.link {
+        cursor: pointer;
+        opacity: 0.8;
+        transition: opacity 0.1s ease-in-out;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &.circular {
+        border-radius: 50%;
+    }
+}

package/ui/css/index.scss

@@ -0,0 +1,11 @@
+@import "reset";
+@import "fonts";
+@import "grauity-icons";
+@import "colors";
+@import "animations";
+
+@import "icons";
+
+.grauity-init {
+    font-size: calc(var(--multiplier) * 16px);
+}