spoko-design-system 0.2.27 → 0.2.28

package/src/styles/base/grid.scss

@@ -1,99 +1,94 @@
-.content-grid {
-    --padding-inline: 1rem;
-    --content-max-width: 900px;
-    --breakout-max-width: 1200px;
-
-    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
-
-    display: grid;
-    grid-template-columns:
-        [full-width-start] minmax(var(--padding-inline), 1fr)
-        [breakout-start] minmax(0, var(--breakout-size))
-        [content-start] min(
-            100% - (var(--padding-inline) * 2),
-            var(--content-max-width)
-        )
-        [content-end]
-        minmax(0, var(--breakout-size)) [breakout-end]
-        minmax(var(--padding-inline), 1fr) [full-width-end];
-
-    h1, h2, h3, h4, h5 {
-        font-weight: bold;
-        @apply font-textbold;
-    }
-
-    &> :not(.breakout, .full-width),
-    .full-width> :not(.breakout, .full-width) {
-        grid-column: content;
-    }
-
-    &>.breakout {
-        grid-column: breakout;
-    }
-
-    &>.full-width {
-        grid-column: full-width;
-    
-        display: grid;
-        grid-template-columns: inherit;
-    }
-    
-}
-
-img.full-width {
-    width: 100%;
-    max-height: 45vh;
-    object-fit: cover;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-.article-title {
-    @apply font-textbold;
-    font-size: var(--fs-800);
-    line-height: 1.05;
-    text-transform: uppercase;
-}
-
-.section-title {
-    font-size: var(--fs-800);
-    line-height: 1.1;
-}
-
-.visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}
-
-.call-to-action {
-    @apply px-8 py-6    ; //border-2 border-black;
-    // background: var(--clr-primary-400);
-}
-
-.wrapper {
-    width: calc(100% - 3rem);
-    max-width: var(--content-max-width);
-    margin-inline: auto;
-}
-
-.flow>*+* {
-    margin-top: var(--flow-spacing, 1em);
-}
-
-.section-padding {
-    padding-block: 2.5rem;
-}
-
-.even-columns {
-    display: flex;
-    gap: 1rem;
+.content-grid {
+    --padding-inline: 1rem;
+    --content-max-width: 900px;
+    --breakout-max-width: 1200px;
+
+    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
+
+    display: grid;
+    grid-template-columns:
+        [full-width-start] minmax(var(--padding-inline), 1fr)
+        [breakout-start] minmax(0, var(--breakout-size))
+        [content-start] min(
+            100% - (var(--padding-inline) * 2),
+            var(--content-max-width)
+        )
+        [content-end]
+        minmax(0, var(--breakout-size)) [breakout-end]
+        minmax(var(--padding-inline), 1fr) [full-width-end];
+
+    &> :not(.breakout, .full-width),
+    .full-width> :not(.breakout, .full-width) {
+        grid-column: content;
+    }
+
+    &>.breakout {
+        grid-column: breakout;
+    }
+
+    &>.full-width {
+        grid-column: full-width;
+    
+        display: grid;
+        grid-template-columns: inherit;
+    }
+    
+}
+
+img.full-width {
+    width: 100%;
+    max-height: 45vh;
+    object-fit: cover;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+.article-title {
+    @apply font-textbold;
+    font-size: var(--fs-800);
+    line-height: 1.05;
+    text-transform: uppercase;
+}
+
+.section-title {
+    font-size: var(--fs-800);
+    line-height: 1.1;
+}
+
+.visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.call-to-action {
+    @apply px-8 py-6    ; //border-2 border-black;
+    // background: var(--clr-primary-400);
+}
+
+.wrapper {
+    width: calc(100% - 3rem);
+    max-width: var(--content-max-width);
+    margin-inline: auto;
+}
+
+.flow>*+* {
+    margin-top: var(--flow-spacing, 1em);
+}
+
+.section-padding {
+    padding-block: 2.5rem;
+}
+
+.even-columns {
+    display: flex;
+    gap: 1rem;
 }

package/src/styles/content.scss

@@ -1,64 +1,73 @@
-.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;
-    }
-    &>h4 {
-      font-size: 13pt;
-    }
-
-    &>ul {
-      @apply list-disc pl-5
-    }
-  }
-
-  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-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");
-    resize: both;
-  }
-
-  .astro-code {
-    @apply mx-0 p-4;
-    border-radius: 0.44rem;
-  }
-}
-
-table {
-  @apply table-auto text-left border bg-white shadow-md;
-
-  tr {
-    @apply border;
-  }
-
-  td, th {
-    @apply px-4 py-2;
-  }
-
-  thead {
-    @apply bg-gray-100;
-  }
-}
+.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;
+    }
+    &>h4 {
+      font-size: 13pt;
+    }
+
+    &>ul {
+      @apply list-disc pl-5
+    }
+  }
+
+  &>h1, 
+  &>h2,
+  &>h3,
+  &>h4,
+  &>h5 {
+      font-weight: bold;
+      @apply font-textbold;
+  }
+
+  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-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");
+    resize: both;
+  }
+
+  .astro-code {
+    @apply mx-0 p-4;
+    border-radius: 0.44rem;
+  }
+}
+
+table {
+  @apply table-auto text-left border bg-white shadow-md;
+
+  tr {
+    @apply border;
+  }
+
+  td, th {
+    @apply px-4 py-2;
+  }
+
+  thead {
+    @apply bg-gray-100;
+  }
+}

package/src/styles/main.scss

@@ -1,7 +1,7 @@
-
-@import "variables";
-@import "base/typography";
-@import "base/base";
-@import "base/grid";
-  
-@import "content.scss";
+
+@import "variables";
+@import "base/typography";
+@import "base/base";
+@import "base/grid";
+  
+@import "content.scss";

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