spoko-design-system 0.2.27 → 0.2.29

package/src/styles/base/_base.scss

@@ -1,185 +1,185 @@
-:root {
-  --color-scheme: light;
-  
-  --clr-primary-400: hsl(198, 100%, 43%); /* {$blue}; */
-  --secondary: #{$gray-500};
-  --tertiary: #{$verydarkblue};
-
-  --font-family: 'vw_textregular', 'system-ui', 'ui-sans-serif', sans-serif;;
-
-  // variables for future changes:
-
-  // font sies
-  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
-  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
-  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
-  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
-  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
-  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
-  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
-
-  // colors
-  --clr-primary-300: rgb(53, 114, 227);
-  --clr-primary-400: hsl(198, 100%, 43%);
-  --clr-primary-500: hsl(219, 76%, 25%);
-  --clr-secondary-300: hsl(269, 75%, 55%);
-  --clr-secondary-400: hsl(269, 75%, 40%);
-  --clr-secondary-500: hsl(269, 75%, 25%);
-  --clr-accent-200: hsl(358, 85%, 80%);
-  --clr-accent-300: hsl(358, 72%, 65%);
-  --clr-accent-400: hsl(358, 72%, 50%);
-  --clr-accent-500: hsl(358, 72%, 35%);
-
-}
-
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-family);
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-
-/*  
-    Chrome 121 added support for scrollbar-width and scrollbar-color. 
-    If you have scrollbar-width it will disable the --webkit-scrollbar pseudo elements.
-    https://developer.chrome.com/blog/new-in-chrome-121
-    https://developer.chrome.com/docs/css-ui/scrollbar-styling
-    https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
-*/
-::-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: var(--clr-primary-400);
-}
-
-// Fallback to browsers without webkit-scrollbar support
-@supports not selector(::-webkit-scrollbar) {
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--clr-primary-400) rgba(0, 0, 0, 0.1)
-  }
-}
-
-*: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;
-}
-
-.bg-primary {
-  background: var(--clr-primary-500);
-}
-
-.display-3 {
-  letter-spacing: -0.96px;
-}
-
-code {
-  @apply font-novamono;
-}
-
-
-html {
-  scroll-behavior: smooth;
-}
-
-
-//Swiper styles
-:root {
-  // --swiper-navigation-color: #0099da;
-  --swiper-navigation-size: 22px;
-  --swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
-  --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;
-}
-
-.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;
-    }
-  }
+:root {
+  --color-scheme: light;
+  
+  --clr-primary-400: hsl(198, 100%, 43%); /* {$blue}; */
+  --secondary: #{$gray-500};
+  --tertiary: #{$verydarkblue};
+
+  --font-family: 'vw_textregular', 'system-ui', 'ui-sans-serif', sans-serif;;
+
+  // variables for future changes:
+
+  // font sies
+  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
+  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
+  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
+  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
+  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
+  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
+  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
+
+  // colors
+  --clr-primary-300: rgb(53, 114, 227);
+  --clr-primary-400: hsl(198, 100%, 43%);
+  --clr-primary-500: hsl(219, 76%, 25%);
+  --clr-secondary-300: hsl(269, 75%, 55%);
+  --clr-secondary-400: hsl(269, 75%, 40%);
+  --clr-secondary-500: hsl(269, 75%, 25%);
+  --clr-accent-200: hsl(358, 85%, 80%);
+  --clr-accent-300: hsl(358, 72%, 65%);
+  --clr-accent-400: hsl(358, 72%, 50%);
+  --clr-accent-500: hsl(358, 72%, 35%);
+
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+/*  
+    Chrome 121 added support for scrollbar-width and scrollbar-color. 
+    If you have scrollbar-width it will disable the --webkit-scrollbar pseudo elements.
+    https://developer.chrome.com/blog/new-in-chrome-121
+    https://developer.chrome.com/docs/css-ui/scrollbar-styling
+    https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
+*/
+::-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: var(--clr-primary-400);
+}
+
+// Fallback to browsers without webkit-scrollbar support
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--clr-primary-400) rgba(0, 0, 0, 0.1)
+  }
+}
+
+*: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;
+}
+
+.bg-primary {
+  background: var(--clr-primary-500);
+}
+
+.display-3 {
+  letter-spacing: -0.96px;
+}
+
+code {
+  @apply font-novamono;
+}
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+
+//Swiper styles
+:root {
+  // --swiper-navigation-color: #0099da;
+  --swiper-navigation-size: 22px;
+  --swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
+  --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;
+}
+
+.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;
+    }
+  }
 }

package/src/styles/base/_typography.scss

@@ -1,70 +1,70 @@
-@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-face {
-    font-family: 'vw_headlight';
-    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@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-face {
-    font-family: 'vw_textlight';
-    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-// for some content which don't need to index in Google
-[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-face {
+    font-family: 'vw_headlight';
+    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@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-face {
+    font-family: 'vw_textlight';
+    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+// for some content which don't need to index in Google
+[data-text]:before {
+    content: attr(data-text);
+}