spoko-design-system 0.0.1 → 0.0.5

package/src/styles/base/_base.scss

@@ -1,158 +1,166 @@
-* {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-    font-family: 'vw_textregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
-    overflow-y: scroll;
-    scrollbar-width: thin;
-    overflow-x: hidden;
-}
-
-::-webkit-scrollbar {
-    width: 5px;
-    height: 3px;
-}
-
-::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.1); //$secondary;
-    border-radius: 0;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 0;
-    background-color: $blue;
-}
-
-*:focus {
-    outline: none !important;
-}
-
-
-.bg-spoko {
-    background: radial-gradient(circle at 50% 85%, #00437A 0%, #001E50 100%);
-    color: #fff;
-    width: 100%;
-}
-
-.bg-vw {
-    background: radial-gradient(
-        circle at 50% 85%,
-        #00437A 0%,
-        #001E50 100%
-    );
-    color: #fff;
-}
-
-.display-3 {
-    letter-spacing: -0.96px;
-}
-
-
-html {
-    scroll-behavior: smooth;
-    
-    &::-webkit-scrollbar {
-      width: 7px; /* width of the entire scrollbar */
-    }
-  
-    &::-webkit-scrollbar-track {
-      background: #00437A; /* color of the tracking area */
-    }
-  
-    &::-webkit-scrollbar-thumb {
-      background-color: $primary; /* color of the scroll thumb */
-      border-radius: 0; /* roundness of the scroll thumb */
-      border: 0 solid #00437A; /* creates padding around scroll thumb */
-    }
-  
-    scrollbar-width: thin;
-    scrollbar-color: $primary #00437A;
-  }
-
-  
-//Swiper styles
-:root {
-    // --swiper-navigation-color: #0099da;
-    --swiper-navigation-size: 22px;
-    --swiper-scrollbar-drag-bg-color: #0099da;
-    --swiper-scrollbar-size: 1px;
-    --swiper-scrollbar-bottom: 0px;
-  }
-  
-  .swiper-horizontal{
-  &> .swiper-scrollbar {
-    height: 1px;
-  }
-  }
-  
-  .fade-enter-active,
-  .fade-leave-active {
-  transition: opacity 0.5s ease;
-  }
-  
-  .fade-enter-from,
-  .fade-leave-to {
-  opacity: 0;
-  }
-  
-  .colon-after {
-  &:after {
-    content: ':'
-  }
-  }
-  
-  .items {
-  & > .item {
-    &:not(:last-child) {
-      &:after {
-        content: ', '
-      }
-    }
-  }
-  }
-  
-  /* override styles when printing */
-  @media print {
-   @page :footer {
-        display: none;
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-  
-    @page :header {
-        display: none;
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-  }
-
-  .comma:not(:last-child) {
-    @apply mr-1;
-  
-    &:after {
-      content: ','
-    }
-  }
-
-#l-page {
-  table {
-    border-collapse: collapse;
-    border-color: inherit;
-    color: #212529;
-    margin-bottom: .875rem;
-    table-layout: fixed;
-    text-indent: 0;
-    width: 100%;
-  
-    td, th {
-      border: 1px solid;
-      padding: 0.5em;
-    }
-  }
-}
-
-[data-icon] {
-  font-size: 1em;
- }
+:root {
+  --primary: #{$blue};
+}
+
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: 'vw_textregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 3px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1); //$secondary;
+    border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 0;
+    background-color: $blue;
+}
+
+*:focus {
+    outline: none !important;
+}
+
+
+.bg-spoko {
+    background: radial-gradient(circle at 50% 85%, #00437A 0%, #001E50 100%);
+    color: #fff;
+    width: 100%;
+}
+
+.bg-vw {
+    background: radial-gradient(
+        circle at 50% 85%,
+        #00437A 0%,
+        #001E50 100%
+    );
+    color: #fff;
+}
+
+.display-3 {
+    letter-spacing: -0.96px;
+}
+
+code {
+ @apply font-novamono;
+}
+
+
+html {
+    scroll-behavior: smooth;
+    
+    &::-webkit-scrollbar {
+      width: 7px; /* width of the entire scrollbar */
+    }
+  
+    &::-webkit-scrollbar-track {
+      background: #00437A; /* color of the tracking area */
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background-color: $primary; /* color of the scroll thumb */
+      border-radius: 0; /* roundness of the scroll thumb */
+      border: 0 solid #00437A; /* creates padding around scroll thumb */
+    }
+  
+    scrollbar-width: thin;
+    scrollbar-color: $primary #00437A;
+  }
+
+  
+//Swiper styles
+:root {
+    // --swiper-navigation-color: #0099da;
+    --swiper-navigation-size: 22px;
+    --swiper-scrollbar-drag-bg-color: #0099da;
+    --swiper-scrollbar-size: 1px;
+    --swiper-scrollbar-bottom: 0px;
+  }
+  
+  .swiper-horizontal{
+  &> .swiper-scrollbar {
+    height: 1px;
+  }
+  }
+  
+  .fade-enter-active,
+  .fade-leave-active {
+  transition: opacity 0.5s ease;
+  }
+  
+  .fade-enter-from,
+  .fade-leave-to {
+  opacity: 0;
+  }
+  
+  .colon-after {
+  &:after {
+    content: ':'
+  }
+  }
+  
+  .items {
+  & > .item {
+    &:not(:last-child) {
+      &:after {
+        content: ', '
+      }
+    }
+  }
+  }
+  
+  /* override styles when printing */
+  @media print {
+   @page :footer {
+        display: none;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+  
+    @page :header {
+        display: none;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+  }
+
+  .comma:not(:last-child) {
+    @apply mr-1;
+  
+    &:after {
+      content: ','
+    }
+  }
+
+#l-page {
+  table {
+    border-collapse: collapse;
+    border-color: inherit;
+    color: #212529;
+    margin-bottom: .875rem;
+    table-layout: fixed;
+    text-indent: 0;
+    width: 100%;
+  
+    td, th {
+      border: 1px solid;
+      padding: 0.5em;
+    }
+  }
+}
+
+svg {
+  color: var(--primary);
+}

package/src/styles/base/_typography.scss

@@ -1,148 +1,148 @@
-@font-face {
-    font-family: 'vw_textregular';
-    src: url('/fonts/vwtext-regular-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'vw_textbold';
-    src: url('/fonts/vwtext-bold-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-.font-vw-textbold {
-    font-family: 'vw_textbold';
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headbold';
-    src: url('/fonts/vwhead-bold-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-.font-vw-headbold {
-    font-family: 'vw_headbold' !important;
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headregular';
-    src: url('/fonts/vwhead-regular-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-// .font-headregular {
-//     font-family: 'vw_headregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
-//     font-display: fallback;
-// }
-
-@font-face {
-    font-family: 'vw_headlight';
-    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-// .font-headlight {
-//     font-family: 'vw_headlight';
-// }
-
-@font-face {
-    font-family: 'Nova Mono';
-    src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap; //fallback;
-}
-
-// .font-mono {
-//     font-family: 'Nova Mono';
-// }
-
-@font-face {
-    font-family: 'vw_textlight';
-    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-// @font-face {
-//     font-family: 'swiper-icons';
-//     src: url('/fonts/swiper-icons.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-textlight {
-//     font-family: 'vw_textlight';
-// }
-
-// @font-face {
-//     font-family: 'vw-headline-ltab';
-//     src: url('/fonts/VWHeadline-LtTab.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-vw-headline-ltab {
-//     font-family: 'vw-headline-ltab';
-// }
-
-// @font-face {
-//     font-family: 'futura-book';
-//     src: url('/fonts/Futura-Book.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-futura-book {
-//     font-family: 'futura-book';
-// }
-
-// @font-face {
-//     font-family: 'futura-pt-light';
-//     src: url('/fonts/futura-pt-light.woff2') format('woff2');
-//     // src: url('/fonts/Futura-Book.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-futura-pt-light {
-//     font-family: 'futura-pt-light';
-// }
-
-
-// @font-face {
-//     font-family: 'futura-pt-medium';
-//     src: url('/fonts/futura-pt-medium.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-futura-pt-medium {
-//     font-family: 'futura-pt-medium';
-// }
-
-
-// src: url('/fonts/Futura-Book-BT.woff') format('woff');
-// src: url('/fonts/futura-bk-bt-book_18979-webfont.woff2') format('woff2');
-
-[data-text]:before {
-    content: attr(data-text);
+@font-face {
+    font-family: 'vw_textregular';
+    src: url('/fonts/vwtext-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'vw_textbold';
+    src: url('/fonts/vwtext-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+.font-vw-textbold {
+    font-family: 'vw_textbold';
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headbold';
+    src: url('/fonts/vwhead-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+.font-vw-headbold {
+    font-family: 'vw_headbold' !important;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headregular';
+    src: url('/fonts/vwhead-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+// .font-headregular {
+//     font-family: 'vw_headregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
+//     font-display: fallback;
+// }
+
+@font-face {
+    font-family: 'vw_headlight';
+    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+// .font-headlight {
+//     font-family: 'vw_headlight';
+// }
+
+@font-face {
+    font-family: 'Nova Mono';
+    src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap; //fallback;
+}
+
+// .font-mono {
+//     font-family: 'Nova Mono';
+// }
+
+@font-face {
+    font-family: 'vw_textlight';
+    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+// @font-face {
+//     font-family: 'swiper-icons';
+//     src: url('/fonts/swiper-icons.woff2') format('woff2');
+//     font-weight: normal;
+//     font-style: normal;
+//     font-display: swap;
+// }
+
+// .font-textlight {
+//     font-family: 'vw_textlight';
+// }
+
+// @font-face {
+//     font-family: 'vw-headline-ltab';
+//     src: url('/fonts/VWHeadline-LtTab.woff2') format('woff2');
+//     font-weight: normal;
+//     font-style: normal;
+//     font-display: swap;
+// }
+
+// .font-vw-headline-ltab {
+//     font-family: 'vw-headline-ltab';
+// }
+
+// @font-face {
+//     font-family: 'futura-book';
+//     src: url('/fonts/Futura-Book.woff2') format('woff2');
+//     font-weight: normal;
+//     font-style: normal;
+//     font-display: swap;
+// }
+
+// .font-futura-book {
+//     font-family: 'futura-book';
+// }
+
+// @font-face {
+//     font-family: 'futura-pt-light';
+//     src: url('/fonts/futura-pt-light.woff2') format('woff2');
+//     // src: url('/fonts/Futura-Book.woff2') format('woff2');
+//     font-weight: normal;
+//     font-style: normal;
+//     font-display: swap;
+// }
+
+// .font-futura-pt-light {
+//     font-family: 'futura-pt-light';
+// }
+
+
+// @font-face {
+//     font-family: 'futura-pt-medium';
+//     src: url('/fonts/futura-pt-medium.woff2') format('woff2');
+//     font-weight: normal;
+//     font-style: normal;
+//     font-display: swap;
+// }
+
+// .font-futura-pt-medium {
+//     font-family: 'futura-pt-medium';
+// }
+
+
+// src: url('/fonts/Futura-Book-BT.woff') format('woff');
+// src: url('/fonts/futura-bk-bt-book_18979-webfont.woff2') format('woff2');
+
+[data-text]:before {
+    content: attr(data-text);
 }