spoko-design-system 0.0.1

package/src/styles/base/_base.scss

@@ -0,0 +1,158 @@
+* {
+    -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;
+ }

package/src/styles/base/_typography.scss

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

package/src/styles/content.scss

@@ -0,0 +1,72 @@
+.content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.77rem;
+  }
+  h1 {
+    font-size: 22pt;
+    font-weight: 400;
+  }
+  h2 {
+    font-size: 17pt;
+    font-weight: 500;
+  }
+  h3 {
+    font-size: 15pt;
+    font-weight: 600;
+  }
+  h4 {
+    font-size: 13pt;
+  }
+  p {
+    // margin-top: 0.77rem;
+    // color: theme("colors.slate.600");
+  }
+  // a {
+  //   color: theme("colors.blue.600");
+  // }
+
+  pre.astro-code {
+    margin: 0.5rem;
+  }
+
+  code {
+    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .component-preview {
+    padding: 4rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    @apply bg-gray-200;
+    // background-image: url("/grid_dot.svg");
+    background-repeat: repeat;
+    background-size: 1.5rem;
+    border-radius: 0.33rem;
+    border: 1px solid theme("colors.slate.200");
+    margin: 0.5rem;
+    resize: both;
+  }
+
+  .astro-code {
+    padding: 1rem;
+    border-radius: 0.44rem;
+  }
+}
+
+
+.bg-vw {
+  background: radial-gradient(
+      circle at 50% 85%,
+      #00437A 0%,
+      #001E50 100%
+  );
+  color: #fff;
+}

package/src/styles/main.scss

@@ -0,0 +1,22 @@
+
+@import "variables";
+@import "base/typography";
+@import "base/base";
+  
+
+
+
+@import "content.scss";
+
+
+
+
+
+// body {
+//   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+//     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+// }
+
+// @tailwind base;
+// @tailwind components;
+// @tailwind utilities;

package/tailwind.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  // darkMode: "class",
+  content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.d.ts"],
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowJs": true,
+    "types": ["vite/client"]
+  },
+}

package/uno.config.ts

@@ -0,0 +1,228 @@
+// uno.config.ts
+import {
+    defineConfig,
+   transformerVariantGroup,
+   presetAttributify,
+   presetIcons,
+   presetTypography,
+   presetUno,
+   presetWebFonts,
+   transformerDirectives,
+  } from 'unocss'
+
+
+// import transformerVariantGroup from '@unocss/transformer-variant-group'
+
+// import presetWind from '@unocss/preset-wind';
+// import presetUno from '@unocss/preset-uno';
+// import presetAttributify from '@unocss/preset-attributify';
+// import presetTypography from '@unocss/preset-typography';
+// import presetWebFonts from '@unocss/preset-web-fonts';
+
+
+
+export default defineConfig({
+  // ...
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  shortcuts: [
+    ['main','text-gray-700 dark:text-gray-200 dark:bg-blue-700 pt-24 sm:pt-14 relative'],
+    ['nav','bg-white dark:bg-black absolute sm:fixed w-full top-0 z-40 sm:z-30 max-w-screen'],
+    ['cat-menu','fixed bottom-[-4px] w-full z-10 border-t-1 border-gray-300 bg-white dark:bg-blue-900 text-center sm:(static z-auto border-t-none) sm:min-h-32'],
+    ['cats-slide','transition duration-300 ease-linear mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black dark:text-white hover:(text-white even:bg-blue-600 odd:bg-lightBlue-500) cursor-pointer flex items-center flex-col justify-center transition ease-in-out duration-700 px-1.5 cursor-grab active:cursor-grabbing overflow-hidden'],
+    ['cats-img','w-full h-8 md:h-icon group-hover:filter-invert dark:filter-invert relative'],
+    ['subcat', 'whitespace-nowrap cursor-pointer text-light-blue-600 dark:text-lightBlue-500 hover:text-lightBlue-600 font-light mb-1 py-2 md:py-0'],
+    ['product-row','bg-white flex flex-wrap  odd:(pr-2.5 pl-3.5 sm:px-0) even:(pl-2.5 pr-3.5 sm:px-0) w-1/2 sm:w-auto sm:grid sm:grid-cols-3 gap-x-1 gap-y-0 md:(grid-cols-product gap-x-4) justify-start content-start content-start  place-content-start py-4 pb-6 sm:pb-4'],
+    ['product-row__photo','aspect-ratio-[4/3] mb-2 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0) w-100 col-span-1 row-span-3 max-w-full text-left overflow-hidden relative bg-gray-100 md:(col-span-1 row-span-1) box-content'], //filter drop-shadow-sm
+    ['product-row__description', 'text-xs text-gray-900 dark:text-gray-300 leading-tight mt-2 font-textlight line-clamp-3 whitespace-normal md:(text-sm mt-0 font-textregular whitespace-pre-wrap)'],
+    ['product-row__main', 'w-full sm:w-auto col-span-2 leading-none relative sm:pl-1 md:(pl-0 row-start-1 col-start-2 col-span-1)'],
+    ['product-date', 'inline-block text-xxs md:text-xs leading-none mt-1 md:(mt-4 mb-1) mr-2'],
+    ['detail-name', 'text-xs text-gray-900 dark:text-gray-300 leading-tight font-textlight line-clamp-3 whitespace-normal md:(text-sm whitespace-pre-wrap line-clamp-9 font-textregular)'],
+    ['detail-row','text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 gap-4 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max)'],
+    ['product-thumb', 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-gray-100'],
+    ['product-thumb--plp','aspect-ratio-[4/3] flex items-center flex justify-center mb-3 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'], //filter drop-shadow-sm
+    ['product-thumb--related', 'w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto object-contain object-top bg-gray-100 aspect-[4/3] relative'],
+    ['product-thumb--carousel', 'w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto object-contain object-top bg-gray-100 aspect-[4/3] relative'],
+    ['product-link--related', 'relative flex w-full bg-white dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-full after:left-0 after:h-px after:-bottom-2 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:(opacity-100 text-teal-600)'],
+    ['sidebar-title','font-headregular text-light-blue-500 text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 flex items-center justify-center sm:justify-start py-3'],
+    ['product-info','text-gray-400 text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
+    ['product-button', 'text-blue-500 cursor-pointer text-base leading-none  inline-flex items-center justify-center w-8 h-8 min-w-8 transition-colors duration-150 bg-white dark:bg-blue-901 focus:(text-blue-500) hover:(text-blue-500)'],
+    ['pdp-headline','text-2xl sm:text-4xl 2xl:text-5xl font-headlight mb-6 font-bold sm:font-normal pr-7 lg:pr-0 pt-0 leading-none'],
+    ['pdp-detail-row','text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4'],
+    ['pdp-slide','h-full bg-gray-100 aspect-[4/3] relative overflow-hidden border border-transparent'],
+    ['slide-bg','scale-140 bg-center bg-no-repeat bg-contain h-full w-full absolute top-0 filter-blur overflow-hidden transform bg-gray-200 dark:bg-gray-700'],
+    ['slide-img','cursor-zoom-in my-auto z-50 h-full max-w-screen-2xl object-center object-contain pointer-events-none'],
+    ['slide-pic','w-full flex justify-end absolute top-0 bottom-0'],
+    ['slide-thumb','bg-gray-100 aspect-[4/3] w-auto h-auto cursor-grab active:cursor-grabbing max-h-44'],
+    ['slide-thumb__img','pointer-events-none pb-px h-full m-auto object-cover bg-white dark:bg-blue-901'],
+    ['cat-card','p-4 text-base md:text-sm'],
+    ['flag-ua', 'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]'],
+    ['slimbanner','px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative'],
+    ['similar-products','flex items-center space-y-4 gap-8 flex-wrap px-4 md:grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5'],
+    ['products-grid','flex w-full flex-nowrap items-center pr-4 md:grid grid-rows-1 overflow-hidden grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]'],
+    ['cat-link','whitespace-nowrap cursor-pointer text-blue-901 dark:text-white hover:text-lightBlue-400 font-light uppercase py-2 md:py-0'],
+    ['plp-name','flex items-center leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12'],
+    ['plp-replacements','col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
+    ['product-number','font-mono content-center flex flex-wrap flex-col content-start'],
+    ['product-code','text-blue-500 dark:text-lightBlue-500 mr-1 leading-none tracking-wide select-all'],
+    ['code-formatted','leading-none mt-0 relative text-xs'],
+    ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
+    ['btn-copy-text','shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
+    ['plp-icons','absolute top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto flex justify-end text-sm'],
+    ['plp-desc','hidden sm:block col-span-3 md:col-span-1 md:col-start-3 relative px-2 sm:px-0'],
+    ['plp-materials', 'text-xs md:text-sm text-gray-900 dark:text-gray-300 leading-tight font-textlight md:font-textregular whitespace-normal md:whitespace-pre-wrap'],
+    ['plp-b-desc','whitespace-pre-wrap text-xs md:text-sm font-textlight leading-4 md:leading-5'],
+    ['category-tile', 'flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) 3xl:(w-19.60% min-w-19.60%) flex ml-1 lg:ml-1.5'],
+    ['carousel-tile', 'w-52 min-w-52 flex ml-1 lg:ml-1.5'],
+    ['category-carousel__link', 'uppercase ml-auto px-4 text-xs flex items-center mt-3 hover:underline'],
+    ['adsbygoogle', 'w-full text-center'],
+    ['search-container', 'mb-2 sm:mb-0'],
+    ['l-main', 'text-gray-700 dark:text-gray-200 pt-24 sm:pt-14 bg-white dark:bg-blue-901'],
+    ['product-link', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px  after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
+    ['category-section', 'pb-4 w-full bg-white mb-4 overflow-x-hidden flex flex-wrap max-w-full'],
+    ['number-secondary', 'block absolute inset-0 text-gray-400 select-all bg-white dark:bg-blue-901'],
+    ['product-list', 'flex flex-wrap sm:block bg-white dark:bg-blue-901 sm:divide-y-1 sm:divide-solid divide-gray-200 dark:divide-white dark:divide-opacity-10 md:px-2 md:pl-4 mb-4 w-full bg-gray-100 dark:bg-gray-700 mb-auto']
+  
+  ],
+  theme: {
+    colors: {
+      blue: {
+        500: '#3b82f6',
+        600: '#02307d',
+        700: '#001e50',
+        800: '#00437a',
+        900: '#000f28',
+        901: '#0c1a32',
+        wrc: '#0000c8'
+      },
+      lightBlue: {
+        400: '#00b0f0',
+        500: '#0099da',
+        600: '#0087c1',
+        700: '#006ea6'
+      },
+      gray: {
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#b5bbc5',
+        400: '#9ca3af',
+        500: '#64748B'
+      }
+    },
+    gridTemplateColumn: {
+      16: 'repeat(16, minmax(0, 1fr))',
+      product: '15rem 20rem minmax(15rem, 1fr) ',
+      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
+      replacement: '6.25rem 12rem auto', // minmax(10rem, 1fr)
+      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
+    },
+    height: {
+      'tile': ' 104px',
+      'tile-mobile': ' 78px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
+      icon: '46px',
+    },
+    filter: {
+      blur: 'blur(5px)',
+    },
+    backgroundSize: {
+      full: '100% 100%',
+    },
+    maxHeight: {
+      icon: '46px',
+      sidebar: 'calc(100vh - 5.125rem)',
+    },
+    minHeight: {
+      'tile': ' 104px',
+      'tile-mobile': ' 78px',
+    },
+    scale: ['group-hover'],
+    cursor: {
+      'zoom-in': 'zoom-in',
+    },
+    breakpoints: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px',
+      '4xl': '2400px',
+    },
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px',
+      'print': { 'raw': 'print' },
+    },
+    fontSize: {
+      xxs: '.625rem',
+    },
+    aspectRatio: {
+      '4/3': '4 / 3',
+    },
+  },
+  presets: [
+      presetUno(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+        warn: true,
+        prefix: 'i-',
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+          // ...
+        },
+      }),
+      presetTypography(),
+      presetWebFonts({
+        fonts: {
+          sans: [{
+            name: 'vw_textregular',
+            provider: 'none'
+          }],
+          novamono: [{
+            name: 'Nova Mono',
+            provider: 'none'
+          }],
+          mono: [{
+              name: 'Nova Mono',
+              provider: 'none'
+            }],
+          headlight: [{
+            name: 'vw_headlight',
+            provider: 'none'
+          }],
+          headregular: [{
+            name: 'vw_headregular',
+            provider: 'none'
+          }],
+          headbold: [{
+            name: 'vw_headbold',
+            provider: 'none'
+          }],
+          textlight: [{
+            name: 'vw_textlight',
+            provider: 'none'
+          }],
+          textregular: [{
+            name: 'vw_textregular',
+            provider: 'none'
+          }],
+          textbold: [{
+            name: 'vw_textbold',
+            provider: 'none'
+          }]
+        }
+    })
+  ]
+})