spoko-design-system 0.0.6 → 0.0.8

package/src/styles/content.scss

@@ -18,16 +18,14 @@
     }
     &>h3 {
       font-size: 15pt;
-      font-weight: 600;
     }
     &>h4 {
       font-size: 13pt;
     }
-  }
- 
-  p {
-    // margin-top: 0.77rem;
-    // color: theme("colors.slate.600");
+
+    ul {
+      @apply list-disc pl-5
+    }
   }
 
   code {
@@ -36,7 +34,7 @@
   }
 
   .component-preview {
-    @apply bg-blue-600 bg-opacity-5 px-0 py-4 mx-0 sm:(p-8) flex items-center;
+    @apply bg-blue-600 bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
     gap: 1rem;
     border-radius: 0.33rem;
     border: 1px solid theme("colors.slate.200");
@@ -49,7 +47,6 @@
   }
 }
 
-
 table {
   @apply table-auto text-left border bg-white shadow-md;
 
@@ -64,4 +61,4 @@ table {
   thead {
     @apply bg-gray-100;
   }
-}
+}

package/src/styles/main.scss

@@ -3,20 +3,4 @@
 @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/uno.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
   ],
   shortcuts: [
     ['headline','font-headlight font-bold	'],
-    ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit'],
+    ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
     ['img--overlay','after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'],
     ['img--4/3', 'aspect-[4/3] relative object-cover bg-gray-100 h-auto max-w-full'],
     ['img--3/4', 'aspect-[3/4] relative object-cover bg-gray-100 h-auto max-w-full'],
@@ -40,17 +40,19 @@ export default defineConfig({
     ['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
     ['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
     ['img--medium', 'w-60'],
+    ['underline-on-hover', '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'],
 
-    ['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center rounded-full shadow text-base text-white'],
-    ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center rounded-full shadow text-base text-white'],
-    ['btn-tertiary', 'inline-flex items-center font-medium text-center text-white bg-blue-700 rounded-full hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'],
-    ['btn-text', 'text-gray-400 hover:bg-blue-700 hover:text-white rounded-full'],
-    ['btn-tag', 'bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full dark:bg-gray-700 dark:text-blue-400 border border-blue-400 hover:border-blue-600'],
-
-    ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3'],
-    ['btn-sm', 'px-6 py-2 text-sm'],
-    ['btn-xs', 'px-4 py-1 text-sm font-medium'],
-
+    ['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center shadow text-base text-white'],
+    ['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
+    ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
+    ['btn-secondary-outline', 'border-gray-500 border text-gray-500 font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-gray-500)'],
+    ['btn-tertiary', 'inline-flex border border-transparent items-center font-medium text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300'],
+    ['btn-tertiary-outline', 'inline-flex border items-center font-medium text-center text-blue-700 border-blue-700 transition-all hover:(bg-blue-700 text-white) focus:ring-4 focus:outline-none focus:ring-blue-300 '],
+    ['btn-text', 'text-gray-400 border border-transparent hover:underline transition-all'],
+    ['btn-tag', 'bg-blue-100 text-blue-800 font-medium mr-2 dark:bg-gray-700 dark:text-blue-400 border border-blue-400 hover:border-blue-600 justify-center'],
+    ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
+    ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap	'],
+    ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap	'],
     ['product-number','font-mono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
     ['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'],

package/Layout/Header.astro

@@ -1,111 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import Search from "astro-pagefind/components/Search";
-import { t } from "i18next";
-const { translation, locale } = Astro.props;
-
-import { Image } from "astro:assets";
-import vwLogo from "./../../../public/vw.svg";
-
-const likes = {
-  list: {
-    ids: [0, 1, 2],
-  },
-};
----
-
-<nav class="nav print-hidden" itemscope itemtype="http://schema.org/WPHeader">
-  <div class="mx-auto px-4 shadow-md">
-    <div
-      class="relative flex items-center justify-between h-24 sm:h-14 flex-wrap pt-1 sm:pt-0"
-    >
-      <div class="flex items-center justify-start sm:items-stretch order-1">
-        <div class="flex-shrink-0 flex items-center h-8">
-          <a
-            class="flex items-center"
-            href={locale !== "en" ? `/${locale}/` : "/"}
-            title={t("catalog.title")}
-          >
-            <Image
-              src={vwLogo}
-              alt="VW"
-              width="25"
-              height="25"
-              class="logo mr-2 dark:text-white hover:animate-spin"
-            />
-            <span class="text-xl brand text-left leading-none dark:text-white"
-              >catalog
-              <span
-                class="text-xs block leading-none -mt-0.5 text-lightBlue-500"
-                ><strong class="text-black font-400">polo</strong>blue</span
-              >
-            </span>
-          </a>
-        </div>
-        <div class="hidden sm:(block ml-6)">
-          <div class="flex space-x-4" itemprop="hasPart">
-            <a
-              href={`https://polo.blue${locale === "pl" ? "/pl" : ""}`}
-              class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
-              title="Polo 6R Blog"
-              itemprop="url">Blog</a
-            >
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="relative w-full order-4 h-10 md:(w-64 ml-4 mr-auto order-2 block)"
-      >
-        <Search
-          id="search"
-          transition:name="search-field"
-          transition:persist
-          className="search-container"
-          uiOptions={{
-            showImages: true,
-            showEmptyFilters: false,
-            resetStyles: true,
-            translations: {
-              clear_search: t("search.clear"),
-              placeholder: t("search.type-to-search"),
-              search_label: t("search.search_label"),
-              filters_label: t("search.filters"),
-              zero_results: t("search.zero-results"),
-              many_results: `[COUNT] ${t("search.results-for")} [SEARCH_TERM]`,
-              one_result: `[COUNT] ${t("search.result-for")} [SEARCH_TERM]`,
-              alt_search: t("search.alt_search"),
-              search_suggestion: t("search.search_suggestion"),
-              searching: t("search.searching"),
-              load_more: t("search.load-more"),
-            },
-          }}
-        />
-      </div>
-
-      <div
-        class="flex items-center pr-0 ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 w-20 justify-end md:(static inset-auto order-3)"
-        itemprop="hasPart"
-        itemscope
-        itemtype="http://schema.org/SiteNavigationElement"
-      >
-        <a
-          class="icon-btn mx-2"
-          title={t("button.toggle_langs")}
-          href={translation}
-          itemprop="url"
-          data-astro-reload
-        >
-          <Icon name="carbon:language" />
-        </a>
-      </div>
-    </div>
-  </div>
-</nav>
-
-<style lang="scss">
-  .logo {
-    max-height: 25px;
-    max-width: 25px;
-  }
-</style>