spoko-design-system 0.6.7 → 0.6.9

package/src/pages/patterns/introduction.mdx

@@ -1,60 +1,60 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import Container from '../../components/layout/Container.astro'
-import Header from '../../components/layout/Header.astro'
-
-
-# Patterns
-
-Common patterns for building interfaces.
-
-
-
-## Container (max-w-screen-xl)
-
-<div class="component-preview" style="display: block">
-    <Container class="bg-white">content</Container>
-</div>
-
-### Code
-
-```html
-<Container class="bg-white">content</Container>
-```
-
-
-## Container FullWidth (max-w-full)
-
-<div class="component-preview" style="display: block">
-    <Container class="bg-white" isFullWidth>content</Container>
-</div>
-
-### Code
-
-```html
- <Container class="bg-white" isFullWidth>content</Container>
-```
-
-## Header
-
-<div class="component-preview" style="display: block">
-    <Header class="static">
-        <div slot="logo" class="flex-shrink-0 flex items-center h-8">
-            <div class="bg-gray">LOGO</div>
-        </div>
-        <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
-    </Header>
-</div>
-
-### Code
-
-```html
-<Header>
-    <div slot="logo" class="flex-shrink-0 flex items-center h-8">
-            <div class="bg-gray">LOGO</div>
-        </div>
-    <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
-</Header>
-```
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import Container from '../../components/layout/Container.astro'
+import Header from '../../components/layout/Header.astro'
+
+
+# Patterns
+
+Common patterns for building interfaces.
+
+
+
+## Container (max-w-screen-xl)
+
+<div class="component-preview" style="display: block">
+    <Container class="bg-white">content</Container>
+</div>
+
+### Code
+
+```html
+<Container class="bg-white">content</Container>
+```
+
+
+## Container FullWidth (max-w-full)
+
+<div class="component-preview" style="display: block">
+    <Container class="bg-white" isFullWidth>content</Container>
+</div>
+
+### Code
+
+```html
+ <Container class="bg-white" isFullWidth>content</Container>
+```
+
+## Header
+
+<div class="component-preview" style="display: block">
+    <Header class="static">
+        <div slot="logo" class="flex-shrink-0 flex items-center h-8">
+            <div class="bg-gray">LOGO</div>
+        </div>
+        <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
+    </Header>
+</div>
+
+### Code
+
+```html
+<Header>
+    <div slot="logo" class="flex-shrink-0 flex items-center h-8">
+            <div class="bg-gray">LOGO</div>
+        </div>
+    <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
+</Header>
+```

package/src/pwa.ts

@@ -1,13 +1,13 @@
-import { registerSW } from 'virtual:pwa-register'
-
-registerSW({
-  immediate: true,
-  onRegisteredSW(swScriptUrl) {
-    // eslint-disable-next-line no-console
-    console.log('SW registered: ', swScriptUrl)
-  },
-  onOfflineReady() {
-    // eslint-disable-next-line no-console
-    console.log('PWA application ready to work offline')
-  },
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    // eslint-disable-next-line no-console
+    console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    // eslint-disable-next-line no-console
+    console.log('PWA application ready to work offline')
+  },
 })

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