spoko-design-system 0.0.1 → 0.0.2

package/src/styles/content.scss

@@ -1,72 +1,51 @@
-.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;
-}
+.content {
+  .main-section {
+    &>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");
+  }
+
+  code {
+    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .component-preview {
+    @apply bg-blue-600 bg-opacity-5 px-0 mx-0 sm:(p-8) flex items-center;
+    gap: 1rem;
+    border-radius: 0.33rem;
+    border: 1px solid theme("colors.slate.200");
+    resize: both;
+  }
+
+  .astro-code {
+    @apply mx-0 p-4;
+    border-radius: 0.44rem;
+  }
+}
+

package/src/styles/main.scss

@@ -1,22 +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;
+
+@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

@@ -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,12 +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"]
-  },
+{
+  "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"]
+  },
 }