spoko-design-system 0.9.6 → 1.0.1

package/src/styles/_variables.scss

@@ -1,70 +1,70 @@
-@use "sass:map";
-
-$white: #fff !default;
-$gray-100: #F3F4F6;
-$gray-200: #E5E7EB;
-$gray-300: #B5BBC5;
-$gray-400: #9CA3AF;
-$slate-medium: #64748B!default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$filter-label: #a8a8a8;
-
-$bg-stylish: #F6F6F6;
-$bg-highlighted: #E7E7E7;
-$badge-dark: #202020;
-
-// social media colors:
-$facebook: #4267B2;
-$youtube: #ff0000;
-$ebay: #3665f3;
-
-
-$grays: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$grays: map.merge(
-    (
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $slate-medium,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
-    ),
-    $grays
-);
-
-$lightblue: #ccecff;
-$vwblue: #0786ba;
-$vwblue2: #00b1eb;
-$blue: #0099da; //#0070B2; //#007bff !default;
-$darkblue: #00437A;
-$verydarkblue: #001E50;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #e83e8c !default;
-$red: #dc3545;//#e94e1b; //#dc3545 !default;
-$orange: #ff5a00; //allegro//#f4831d; //#ff9700; // #fd7e14 !default;
-$orange-darken: #e94d1a;
-$yellow: #ffc107 !default;
-$green: #28a745 !default;
-$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-$grey: #797878 !default;
-
-
-$primary: $blue; // $blue !default;
-$secondary: $grey; //$gray-600; //$gray-600 !default;
-$success: $green !default;
-$info: $ebay;//$cyan !default;
-$warning: $orange !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-900 !default;
+@use "sass:map";
+
+$white: #fff !default;
+$gray-100: #F3F4F6;
+$gray-200: #E5E7EB;
+$gray-300: #B5BBC5;
+$gray-400: #9CA3AF;
+$slate-medium: #64748B!default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$filter-label: #a8a8a8;
+
+$bg-stylish: #F6F6F6;
+$bg-highlighted: #E7E7E7;
+$badge-dark: #202020;
+
+// social media colors:
+$facebook: #4267B2;
+$youtube: #ff0000;
+$ebay: #3665f3;
+
+
+$grays: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map.merge(
+    (
+        "100": $gray-100,
+        "200": $gray-200,
+        "300": $gray-300,
+        "400": $gray-400,
+        "500": $slate-medium,
+        "600": $gray-600,
+        "700": $gray-700,
+        "800": $gray-800,
+        "900": $gray-900
+    ),
+    $grays
+);
+
+$lightblue: #ccecff;
+$vwblue: #0786ba;
+$vwblue2: #00b1eb;
+$blue: #0099da; //#0070B2; //#007bff !default;
+$darkblue: #00437A;
+$verydarkblue: #001E50;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #dc3545;//#e94e1b; //#dc3545 !default;
+$orange: #ff5a00; //allegro//#f4831d; //#ff9700; // #fd7e14 !default;
+$orange-darken: #e94d1a;
+$yellow: #ffc107 !default;
+$green: #28a745 !default;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+$grey: #797878 !default;
+
+
+$primary: $blue; // $blue !default;
+$secondary: $grey; //$gray-600; //$gray-600 !default;
+$success: $green !default;
+$info: $ebay;//$cyan !default;
+$warning: $orange !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;

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;
 }