spoko-design-system 0.2.87 → 0.2.89

package/src/styles/base/base.css

@@ -1,185 +1,185 @@
-:root {
-  --color-scheme: light;
-  
-  --clr-primary-400: hsl(198, 100%, 43%); /* {$blue}; */
-  --secondary: #64748B;
-  --tertiary: #001E50;
-
-  --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); 
-  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: #64748B;
+  --tertiary: #001E50;
+
+  --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); 
+  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/grid.css

@@ -1,93 +1,93 @@
-.content-grid {
-    --padding-inline: 1rem;
-    --content-max-width: 900px;
-    --breakout-max-width: 1200px;
-
-    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
-
-    display: grid;
-    grid-template-columns:
-        [full-width-start] minmax(var(--padding-inline), 1fr)
-        [breakout-start] minmax(0, var(--breakout-size))
-        [content-start] min(
-            100% - (var(--padding-inline) * 2),
-            var(--content-max-width)
-        )
-        [content-end]
-        minmax(0, var(--breakout-size)) [breakout-end]
-        minmax(var(--padding-inline), 1fr) [full-width-end];
-
-    > :not(.breakout, .full-width),
-    .full-width> :not(.breakout, .full-width) {
-        grid-column: content;
-    }
-
-    &.breakout {
-        grid-column: breakout;
-    }
-
-    >.full-width {
-        grid-column: full-width;
-    
-        display: grid;
-        grid-template-columns: inherit;
-    }
-    
-}
-
-img.full-width {
-    width: 100%;
-    max-height: 45vh;
-    object-fit: cover;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-.article-title {
-    @apply font-textbold;
-    font-size: var(--fs-800);
-    line-height: 1.05;
-    text-transform: uppercase;
-}
-
-.section-title {
-    font-size: var(--fs-800);
-    line-height: 1.1;
-}
-
-.visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}
-
-.call-to-action {
-    @apply px-8 py-6; 
-}
-
-.wrapper {
-    width: calc(100% - 3rem);
-    max-width: var(--content-max-width);
-    margin-inline: auto;
-}
-
-.flow>*+* {
-    margin-top: var(--flow-spacing, 1em);
-}
-
-.section-padding {
-    padding-block: 2.5rem;
-}
-
-.even-columns {
-    display: flex;
-    gap: 1rem;
+.content-grid {
+    --padding-inline: 1rem;
+    --content-max-width: 900px;
+    --breakout-max-width: 1200px;
+
+    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
+
+    display: grid;
+    grid-template-columns:
+        [full-width-start] minmax(var(--padding-inline), 1fr)
+        [breakout-start] minmax(0, var(--breakout-size))
+        [content-start] min(
+            100% - (var(--padding-inline) * 2),
+            var(--content-max-width)
+        )
+        [content-end]
+        minmax(0, var(--breakout-size)) [breakout-end]
+        minmax(var(--padding-inline), 1fr) [full-width-end];
+
+    > :not(.breakout, .full-width),
+    .full-width> :not(.breakout, .full-width) {
+        grid-column: content;
+    }
+
+    >.breakout {
+        grid-column: breakout;
+    }
+
+    >.full-width {
+        grid-column: full-width;
+    
+        display: grid;
+        grid-template-columns: inherit;
+    }
+    
+}
+
+img.full-width {
+    width: 100%;
+    max-height: 45vh;
+    object-fit: cover;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+.article-title {
+    @apply font-textbold;
+    font-size: var(--fs-800);
+    line-height: 1.05;
+    text-transform: uppercase;
+}
+
+.section-title {
+    font-size: var(--fs-800);
+    line-height: 1.1;
+}
+
+.visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.call-to-action {
+    @apply px-8 py-6; 
+}
+
+.wrapper {
+    width: calc(100% - 3rem);
+    max-width: var(--content-max-width);
+    margin-inline: auto;
+}
+
+.flow>*+* {
+    margin-top: var(--flow-spacing, 1em);
+}
+
+.section-padding {
+    padding-block: 2.5rem;
+}
+
+.even-columns {
+    display: flex;
+    gap: 1rem;
 }

package/src/styles/base/typography.css

@@ -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; 
-}
-
-@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; 
+}
+
+@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);
+}