directory name change

Standard UI Components/tsconfig.json

@@ -1,11 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "commonjs",
-        "target": "ESNext",
-        "watch": true,
-        "lib": ["DOM", "ES2017"]
-    },
-    "exclude": [
-        "node_modules"
-    ]
-}

components/css/main.scss

@@ -1,491 +1,491 @@
-*{
+*{
-    padding: 0;
+    padding: 0;
-    margin: 0;
+    margin: 0;
-    box-sizing: border-box;
+    box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Roboto', sans-serif;
-}
+}
-:root{
+:root{
-    font-size: clamp(1rem, 1.2vmax, 3rem);
+    font-size: clamp(1rem, 1.2vmax, 3rem);
-}
+}
-html, body{
+html, body{
-    height: 100%;
+    height: 100%;
-    scroll-behavior: smooth;
+    scroll-behavior: smooth;
-}
+}
-body {
+body {
-    --accent-color: #4d2588;
+    --accent-color: #4d2588;
-    --light-shade: rgba(var(--text-color), 0.06);
+    --light-shade: rgba(var(--text-color), 0.06);
-    --text-color: 17, 17, 17;
+    --text-color: 17, 17, 17;
-    --text-color-light: 100, 100, 100;
+    --text-color-light: 100, 100, 100;
-    --foreground-color: 255, 255, 255;
+    --foreground-color: 255, 255, 255;
-    --background-color: #F6f6f6;
+    --background-color: #F6f6f6;
-    --error-color: red;
+    --error-color: red;
-    --green: #00843b;
+    --green: #00843b;
-    color: rgba(var(--text-color), 1);
+    color: rgba(var(--text-color), 1);
-    background: var(--background-color);
+    background: var(--background-color);
-}
+}
-body[data-theme='dark']{
+body[data-theme='dark']{
-    --accent-color: #976dd6;
+    --accent-color: #976dd6;
-    --green: #13ff5a;
+    --green: #13ff5a;
-    --text-color: 240, 240, 240;
+    --text-color: 240, 240, 240;
-    --text-color-light: 170, 170, 170;
+    --text-color-light: 170, 170, 170;
-    --foreground-color: 20, 20, 20;
+    --foreground-color: 20, 20, 20;
-    --background-color: #0a0a0a;
+    --background-color: #0a0a0a;
-    --error-color: rgb(255, 106, 106);
+    --error-color: rgb(255, 106, 106);
-}
+}
-.full-bleed{
+.full-bleed{
-    grid-column: 1/4;
+    grid-column: 1/4;
-}
+}
-.h1{
+.h1{
-    font-size: 2.5rem;
+    font-size: 2.5rem;
-}
+}
-.h2{
+.h2{
-    font-size: 2rem;
+    font-size: 2rem;
-}
+}
-.h3{
+.h3{
-    font-size: 1.4rem;
+    font-size: 1.4rem;
-}
+}
-.h4{
+.h4{
-    font-size: 1rem;
+    font-size: 1rem;
-}
+}
-.h5{
+.h5{
-    font-size: 0.8rem;
+    font-size: 0.8rem;
-}
+}
-
+
-.uppercase{
+.uppercase{
-    text-transform: uppercase;
+    text-transform: uppercase;
-}
+}
-.capitalize{
+.capitalize{
-    text-transform: capitalize;
+    text-transform: capitalize;
-}
+}
-
+
-p {
+p {
-    font-size: 0.8;
+    font-size: 0.8;
-    max-width: 75ch;
+    max-width: 75ch;
-    line-height: 1.7;
+    line-height: 1.7;
-    color: rgba(var(--text-color), 0.8);
+    color: rgba(var(--text-color), 0.8);
-    &:not(:last-of-type){
+    &:not(:last-of-type){
-        margin-bottom: 1rem;
+        margin-bottom: 1rem;
-    }
+    }
-}
+}
-img{
+img{
-    object-fit: cover;
+    object-fit: cover;
-}
+}
-
+
-a{
+a{
-    color: inherit;
+    color: inherit;
-    text-decoration: none;
+    text-decoration: none;
-    &:focus-visible{
+    &:focus-visible{
-        box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+        box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
-    }
+    }
-}
+}
-
+
-button{
+button{
-    display: inline-flex;
+    display: inline-flex;
-    border: none;
+    border: none;
-    background-color: inherit;
+    background-color: inherit;
-}
+}
-
+
-a:any-link:focus-visible{
+a:any-link:focus-visible{
-    outline: rgba(var(--text-color), 1) 0.1rem solid;
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
-}
+}
-sm-button{
+sm-button{
-    --border-radius: 0.3rem;
+    --border-radius: 0.3rem;
-}
+}
-ul{
+ul{
-    list-style: none;
+    list-style: none;
-}
+}
-.flex{
+.flex{
-    display: flex;
+    display: flex;
-}
+}
-.grid{
+.grid{
-    display: grid;
+    display: grid;
-}
+}
-.hide{
+.hide{
-    opacity: 0;
+    opacity: 0;
-    pointer-events: none;
+    pointer-events: none;
-}
+}
-.hide-completely{
+.hide-completely{
-    display: none !important;
+    display: none !important;
-}
+}
-.no-transformations{
+.no-transformations{
-    transform: none !important;
+    transform: none !important;
-}
+}
-.overflow-ellipsis{
+.overflow-ellipsis{
-    width: 100%;
+    width: 100%;
-    overflow: hidden;
+    overflow: hidden;
-    white-space: nowrap;
+    white-space: nowrap;
-    text-overflow: ellipsis;
+    text-overflow: ellipsis;
-}
+}
-.breakable{
+.breakable{
-    overflow-wrap: break-word;
+    overflow-wrap: break-word;
-    word-wrap: break-word;
+    word-wrap: break-word;
-    -ms-word-break: break-all;
+    -ms-word-break: break-all;
-    word-break: break-word;
+    word-break: break-word;
-    -ms-hyphens: auto;
+    -ms-hyphens: auto;
-    -moz-hyphens: auto;
+    -moz-hyphens: auto;
-    -webkit-hyphens: auto;
+    -webkit-hyphens: auto;
-    hyphens: auto;
+    hyphens: auto;
-}
+}
-.flex{
+.flex{
-    display: flex;
+    display: flex;
-}
+}
-.grid{
+.grid{
-    display: grid;
+    display: grid;
-}
+}
-.grid-3{
+.grid-3{
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: 1fr auto auto;
-}
+}
-.flow-column{
+.flow-column{
-    grid-auto-flow: column;
+    grid-auto-flow: column;
-}
+}
-.gap-0-5{
+.gap-0-5{
-    gap: 0.5rem;
+    gap: 0.5rem;
-}
+}
-.gap-1{
+.gap-1{
-    gap: 1rem;
+    gap: 1rem;
-}
+}
-.gap-1-5{
+.gap-1-5{
-    gap: 1.5rem;
+    gap: 1.5rem;
-}
+}
-.gap-2{
+.gap-2{
-    gap: 2rem;
+    gap: 2rem;
-}
+}
-.gap-3{
+.gap-3{
-    gap: 3rem;
+    gap: 3rem;
-}
+}
-.text-align-right{
+.text-align-right{
-    text-align: right;
+    text-align: right;
-}
+}
-.align-start{
+.align-start{
-    align-items: flex-start;
+    align-items: flex-start;
-}
+}
-.align-center{
+.align-center{
-    align-items: center;
+    align-items: center;
-}
+}
-.text-center{
+.text-center{
-    text-align: center;
+    text-align: center;
-}
+}
-.justify-start{
+.justify-start{
-    justify-content: start;
+    justify-content: start;
-}
+}
-.justify-center{
+.justify-center{
-    justify-content: center;
+    justify-content: center;
-}
+}
-.justify-right{
+.justify-right{
-    margin-left: auto;
+    margin-left: auto;
-}
+}
-.align-self-center{
+.align-self-center{
-    align-self: center;
+    align-self: center;
-}
+}
-.justify-self-center{
+.justify-self-center{
-    justify-self: center;
+    justify-self: center;
-}
+}
-.justify-self-start{
+.justify-self-start{
-    justify-self: start;
+    justify-self: start;
-}
+}
-.justify-self-end{
+.justify-self-end{
-    justify-self: end;
+    justify-self: end;
-}
+}
-.direction-column{
+.direction-column{
-    flex-direction: column;
+    flex-direction: column;
-}
+}
-.space-between{
+.space-between{
-    justify-content: space-between;
+    justify-content: space-between;
-}
+}
-.w-100{
+.w-100{
-    width: 100%;
+    width: 100%;
-}
+}
-.color-0-8{
+.color-0-8{
-    color: rgba(var(--text-color), 0.8);
+    color: rgba(var(--text-color), 0.8);
-}
+}
-.weight-400{
+.weight-400{
-    font-weight: 400;
+    font-weight: 400;
-}
+}
-.weight-500{
+.weight-500{
-    font-weight: 500;
+    font-weight: 500;
-}
+}
-.ripple{
+.ripple{
-    position: absolute;
+    position: absolute;
-    border-radius: 50%;
+    border-radius: 50%;
-    transform: scale(0);
+    transform: scale(0);
-    background: rgba(var(--text-color), 0.16);
+    background: rgba(var(--text-color), 0.16);
-    pointer-events: none;
+    pointer-events: none;
-}
+}
-.interact{
+.interact{
-    position: relative;
+    position: relative;
-    overflow: hidden;
+    overflow: hidden;
-    cursor: pointer;
+    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
-}
+}
-.observe-empty-state:empty{
+.observe-empty-state:empty{
-    display: none;
+    display: none;
-}
+}
-.observe-empty-state:not(:empty) ~ .empty-state{
+.observe-empty-state:not(:empty) ~ .empty-state{
-    display: none;
+    display: none;
-}
+}
-
+
-
+
-.icon{
+.icon{
-    width: 1.5rem;
+    width: 1.5rem;
-    height: 1.5rem;
+    height: 1.5rem;
-    fill: rgba(var(--text-color), 0.9);
+    fill: rgba(var(--text-color), 0.9);
-}
+}
-.button__icon{
+.button__icon{
-    height: 1.2rem;
+    height: 1.2rem;
-    width: 1.2rem;
+    width: 1.2rem;
-    &--left{
+    &--left{
-        margin-right: 0.5rem;
+        margin-right: 0.5rem;
-    }
+    }
-    &--right{
+    &--right{
-        margin-left: 0.5rem;
+        margin-left: 0.5rem;
-    }
+    }
-}
+}
-.theme-switcher{
+.theme-switcher{
-    position: relative;
+    position: relative;
-    justify-self: flex-end;
+    justify-self: flex-end;
-    width: 1.5rem;
+    width: 1.5rem;
-    height: 1.5rem;
+    height: 1.5rem;
-    cursor: pointer;
+    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
-    .icon{
+    .icon{
-        position: absolute;
+        position: absolute;
-        transition: transform 0.6s;
+        transition: transform 0.6s;
-    }
+    }
-}
+}
-.theme-switcher__checkbox{
+.theme-switcher__checkbox{
-    display: none;
+    display: none;
-    &:checked ~ .moon-icon{
+    &:checked ~ .moon-icon{
-        transform: scale(0) rotate(90deg);
+        transform: scale(0) rotate(90deg);
-    }
+    }
-    &:not(:checked) ~ .sun-icon{
+    &:not(:checked) ~ .sun-icon{
-        transform: scale(0)  rotate(-90deg);
+        transform: scale(0)  rotate(-90deg);
-    }
+    }
-}
+}
-
+
-//Syntax highlighting
+//Syntax highlighting
-
+
-
+
-pre .str, code .str { color: #65B042; } /* string  - green */
+pre .str, code .str { color: #65B042; } /* string  - green */
-pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
+pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
-pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
+pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
-pre .typ, code .typ { color: #4395ff; } /* type - light blue */
+pre .typ, code .typ { color: #4395ff; } /* type - light blue */
-pre .lit, code .lit { color: #1a76c2; } /* literal */
+pre .lit, code .lit { color: #1a76c2; } /* literal */
-pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */
+pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */
-pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */
+pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */
-pre .tag, code .tag { color: #22863a; } /* html/xml tag */
+pre .tag, code .tag { color: #22863a; } /* html/xml tag */
-pre .atn, code .atn { color: #005cc5; } /* html/xml attribute name */
+pre .atn, code .atn { color: #005cc5; } /* html/xml attribute name */
-pre .atv, code .atv { color: var(--accent-color); } /* html/xml attribute value*/
+pre .atv, code .atv { color: var(--accent-color); } /* html/xml attribute value*/
-pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
+pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
-
+
-pre{
+pre{
-    max-width: 100%;
+    max-width: 100%;
-	margin: 1rem 0;
+	margin: 1rem 0;
-    padding: 0 1.5rem;
+    padding: 0 1.5rem;
-    overflow-x: auto;
+    overflow-x: auto;
-    font-size: 0.9rem;
+    font-size: 0.9rem;
-    white-space: pre-line;
+    white-space: pre-line;
-    border-radius: 0.5rem;
+    border-radius: 0.5rem;
-    background: rgba(var(--text-color), .04);
+    background: rgba(var(--text-color), .04);
-}
+}
-code{
+code{
-    font-family: 'Roboto Mono', monospace;
+    font-family: 'Roboto Mono', monospace;
-    border-radius: 0.2rem;
+    border-radius: 0.2rem;
-    font-weight: 400;
+    font-weight: 400;
-    padding: 0.2rem 0.4rem;
+    padding: 0.2rem 0.4rem;
-    background: rgba(var(--text-color), .04);
+    background: rgba(var(--text-color), .04);
-}
+}
-code > *{
+code > *{
-    font-family: 'Roboto Mono', monospace;
+    font-family: 'Roboto Mono', monospace;
-}
+}
-pre code{
+pre code{
-    line-height: 1.4;
+    line-height: 1.4;
-    border-radius: none;
+    border-radius: none;
-    background: none;
+    background: none;
-    width: 100%;
+    width: 100%;
-}
+}
-
+
-//
+//
-h1,h2,h3,h4.h5{
+h1,h2,h3,h4.h5{
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins', sans-serif;
-}
+}
-h2{
+h2{
-  margin: 3rem 0 1rem 0;
+  margin: 3rem 0 1rem 0;
-  text-transform: capitalize;
+  text-transform: capitalize;
-  &:first-of-type{
+  &:first-of-type{
-      margin-top: 1rem;
+      margin-top: 1rem;
-  }  
+  }  
-}
+}
-main{
+main{
-    display: grid;
+    display: grid;
-    height: 100%;
+    height: 100%;
-}
+}
-#main_header{
+#main_header{
-    padding: 0.5rem 1.5rem;
+    padding: 0.5rem 1.5rem;
-    border-bottom: 1px solid rgba(var(--text-color), .1);
+    border-bottom: 1px solid rgba(var(--text-color), .1);
-}
+}
-#side_nav_button{
+#side_nav_button{
-    padding: 0.5rem;
+    padding: 0.5rem;
-    margin-left: -0.5rem;
+    margin-left: -0.5rem;
-}
+}
-#backdrop{
+#backdrop{
-    position: fixed;
+    position: fixed;
-    z-index: 4;
+    z-index: 4;
-    top: 0;
+    top: 0;
-    left: 0;
+    left: 0;
-    right: 0;
+    right: 0;
-    bottom: 0;
+    bottom: 0;
-    background-color: rgba(0,0,0, 0.5);
+    background-color: rgba(0,0,0, 0.5);
-}
+}
-#side_nav,
+#side_nav,
-.right{
+.right{
-    max-height: 100%;
+    max-height: 100%;
-    overflow-y: auto;
+    overflow-y: auto;
-    padding-bottom: 3rem;
+    padding-bottom: 3rem;
-}
+}
-#side_nav{
+#side_nav{
-    h4{
+    h4{
-        font-size: 0.9rem;
+        font-size: 0.9rem;
-        letter-spacing: 0.08em;
+        letter-spacing: 0.08em;
-        text-transform: uppercase;
+        text-transform: uppercase;
-        padding: 1rem 1.5rem;
+        padding: 1rem 1.5rem;
-    }
+    }
-}
+}
-.right{
+.right{
-    padding: 1.5rem;
+    padding: 1.5rem;
-    h1{
+    h1{
-        margin-bottom: 1.5rem;
+        margin-bottom: 1.5rem;
-    }
+    }
-}
+}
-.list{
+.list{
-    list-style: none;
+    list-style: none;
-    display: flex;
+    display: flex;
-    flex-direction: column;
+    flex-direction: column;
-    margin-bottom: 0.8rem;
+    margin-bottom: 0.8rem;
-}
+}
-.list__item{
+.list__item{
-    display: flex;
+    display: flex;
-    padding: 0.8rem 1.5rem;
+    padding: 0.8rem 1.5rem;
-    text-transform: capitalize;
+    text-transform: capitalize;
-    &--active{
+    &--active{
-        color: var(--accent-color);
+        color: var(--accent-color);
-        background: rgba(var(--text-color), .06);
+        background: rgba(var(--text-color), .06);
-    }
+    }
-}
+}
-.card{
+.card{
-    display: flex;
+    display: flex;
-    flex-direction: column;
+    flex-direction: column;
-    margin-right: 1rem;
+    margin-right: 1rem;
-    border-radius: 0.4rem;
+    border-radius: 0.4rem;
-    padding: 1.5rem;
+    padding: 1.5rem;
-    min-width: min(24rem, 80%);
+    min-width: min(24rem, 80%);
-    background-color: rgba(var(--text-color), .06);
+    background-color: rgba(var(--text-color), .06);
-}
+}
-sm-carousel{
+sm-carousel{
-    margin-bottom: 1rem;
+    margin-bottom: 1rem;
-}
+}
-sm-tab-header{
+sm-tab-header{
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.5rem;
-}
+}
-.page{
+.page{
-    display: flex;
+    display: flex;
-    flex-direction: column;
+    flex-direction: column;
-}
+}
-.page__title{
+.page__title{
-}
+}
-ol{
+ol{
-    padding: 0.6rem 1rem;
+    padding: 0.6rem 1rem;
-    li{
+    li{
-        margin-bottom: 1rem;
+        margin-bottom: 1rem;
-        &:last-of-type{
+        &:last-of-type{
-            margin-bottom: 0;
+            margin-bottom: 0;
-        }
+        }
-        &::first-letter{
+        &::first-letter{
-            text-transform: capitalize;
+            text-transform: capitalize;
-        }
+        }
-    }
+    }
-}
+}
-#total_components_count{
+#total_components_count{
-    font-size: 4rem;
+    font-size: 4rem;
-}
+}
-#components_selection_list{
+#components_selection_list{
-    display: grid;
+    display: grid;
-    gap: 1.5rem;
+    gap: 1.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    padding: 1.5rem 0 3rem 0;
+    padding: 1.5rem 0 3rem 0;
-}
+}
-.comp-checkbox__title{
+.comp-checkbox__title{
-    margin-left: 0.5rem;
+    margin-left: 0.5rem;
-}
+}
-@media screen and (max-width: 640px){
+@media screen and (max-width: 640px){
-    main{
+    main{
-        grid-template-rows: auto 1fr;
+        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr;
-    }
+    }
-    #side_nav{
+    #side_nav{
-        display: flex;
+        display: flex;
-        flex-direction: column;
+        flex-direction: column;
-        position: fixed;
+        position: fixed;
-        z-index: 5;
+        z-index: 5;
-        height: 100%;
+        height: 100%;
-        width: calc(100% - 4rem);
+        width: calc(100% - 4rem);
-        transition: transform 0.3s;
+        transition: transform 0.3s;
-        background-color: rgba(var(--foreground-color), 1);
+        background-color: rgba(var(--foreground-color), 1);
-        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
+        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
-        &:not(.reveal){
+        &:not(.reveal){
-            transform: translateX(-100%);
+            transform: translateX(-100%);
-        }
+        }
-    }
+    }
-    .reveal{
+    .reveal{
-        transform: none;
+        transform: none;
-    }
+    }
-}
+}
-@media screen and (min-width: 640px){
+@media screen and (min-width: 640px){
-    #main_header{
+    #main_header{
-        padding: 1rem 1.5rem;
+        padding: 1rem 1.5rem;
-        grid-area: main-header;
+        grid-area: main-header;
-    }
+    }
-    #side_nav_button{
+    #side_nav_button{
-        display: none;
+        display: none;
-    }
+    }
-    main{
+    main{
-        grid-template-columns: 14rem minmax(0, 1fr);
+        grid-template-columns: 14rem minmax(0, 1fr);
-        grid-template-areas: 'main-header main-header' '. .';
+        grid-template-areas: 'main-header main-header' '. .';
-    }   
+    }   
-    .right{
+    .right{
-        display: grid;
+        display: grid;
-        grid-template-columns: 1fr 90% 1fr;
+        grid-template-columns: 1fr 90% 1fr;
-        & > * {
+        & > * {
-            grid-column: 2/3;
+            grid-column: 2/3;
-        }
+        }
-    }
+    }
-    #overview_page{
+    #overview_page{
-        display: grid;
+        display: grid;
-        gap: 1.5rem;
+        gap: 1.5rem;
-        grid-template-columns: 1fr auto;
+        grid-template-columns: 1fr auto;
-        & > div:first-of-type{
+        & > div:first-of-type{
-            grid-column: 2/3;
+            grid-column: 2/3;
-            text-align: right;
+            text-align: right;
-        }
+        }
-        & > div:nth-of-type(2){
+        & > div:nth-of-type(2){
-            grid-row: 1/2;
+            grid-row: 1/2;
-        }
+        }
-    }
+    }
-}
+}
-@media (any-hover: hover){
+@media (any-hover: hover){
-    ::-webkit-scrollbar{
+    ::-webkit-scrollbar{
-        width: 0.5rem;
+        width: 0.5rem;
-        height: 0.5rem;
+        height: 0.5rem;
-    }
+    }
-    
+    
-    ::-webkit-scrollbar-thumb{
+    ::-webkit-scrollbar-thumb{
-        background: rgba(var(--text-color), 0.3);
+        background: rgba(var(--text-color), 0.3);
-        border-radius: 1rem;
+        border-radius: 1rem;
-        &:hover{
+        &:hover{
-            background: rgba(var(--text-color), 0.5);
+            background: rgba(var(--text-color), 0.5);
-        }
+        }
-    }
+    }
-    .list__item:hover{
+    .list__item:hover{
-        background: rgba(var(--text-color), .1);
+        background: rgba(var(--text-color), .1);
-        cursor: pointer;
+        cursor: pointer;
-    }
+    }
 }