spoko-design-system 1.18.1 → 1.20.0

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/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/tailwind.config.cjs

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

package/tsconfig.json

@@ -1,29 +1,29 @@
-{
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts", "*.ts"],
-  "compilerOptions": {
-    "baseUrl": "src",
-
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    
-    // Astro will directly run your TypeScript code, no transpilation needed.
-    "noEmit": true,
-
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "allowJs": true,
-    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
-    "paths": {
-      "@components/*": ["components/*"],
-      "@utils/*": ["utils/*"],
-      "@types/*": ["types/*"]
-    }
-  },
-  "exclude": ["dist", "node_modules"]
+{
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts", "*.ts"],
+  "compilerOptions": {
+    "baseUrl": "src",
+
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    
+    // Astro will directly run your TypeScript code, no transpilation needed.
+    "noEmit": true,
+
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowJs": true,
+    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
+    "paths": {
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"],
+      "@types/*": ["types/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules"]
 }