Components: Add global styling.

NordcomInc · Nov 17, 2023 · 54e7ba4 · 54e7ba4 · vercel · Nov 17, 2023
1 parent 4666a9f
commit 54e7ba4
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 64 deletions.
diff --git a/.changeset/witty-nails-bake.md b/.changeset/witty-nails-bake.md
@@ -0,0 +1,6 @@
+---
+'@nordcom/nordstar-heading': patch
+'@nordcom/nordstar-system': patch
+---
+
+Tweak default theme's values.
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -1,7 +1,7 @@
-import '@/styles/base.css';
+import '@/styles/base.scss';
 
 import { NordstarProvider } from '@nordcom/nordstar';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Montserrat } from 'next/font/google';
 
 const font = Montserrat({
@@ -16,12 +16,18 @@ export const metadata: Metadata = {
     title: {
         default: '',
         template: `%s | nordstar Component Library`
-    },
-    alternates: {
-        canonical: 'https://nordstar.nordcom.io/'
     }
 };
 
+export const viewport: Viewport = {
+    initialScale: 1,
+    userScalable: true,
+    width: 'device-width',
+    interactiveWidget: 'resizes-visual',
+    themeColor: '#000000',
+    colorScheme: 'dark'
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">

diff --git a/docs/src/app/page.module.scss b/docs/src/app/page.module.scss
@@ -3,16 +3,29 @@
     flex-direction: column;
     gap: 1rem;
 
-    .title {
-        max-width: 52rem;
+    .header {
         display: flex;
         flex-direction: column;
         gap: 0.25rem;
+        padding-top: calc(var(--layout-section-spacing) * 4);
+        padding-bottom: calc(var(--layout-section-spacing) * 2);
+        width: 52rem;
+        max-width: 100%;
     }
 
     .content {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr;
         gap: 1rem;
+
+        @media (min-width: 950px) {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        .block {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
     }
 }
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -1,25 +1,57 @@
 import { Card, Heading, View } from '@nordcom/nordstar';
+import type { Metadata } from 'next';
 import styles from './page.module.scss';
 
+export const metadata: Metadata = {
+    title: 'Nordstar',
+    alternates: {
+        canonical: 'https://nordstar.nordcom.io/'
+    }
+};
+
 export default async function IndexPage() {
     return (
         <View className={styles.container}>
-            <div className={styles.title}>
+            <div className={styles.header}>
                 <Heading>Nordstar</Heading>
                 <Heading level="h2">
                     An opinionated component library for building human-centric user interfaces
                 </Heading>
             </div>
 
             <div className={styles.content}>
-                <Card>
-                    <Heading level="h3">Guides</Heading>
+                <Card className={styles.block}>
+                    <Heading level="h4" as="p">
+                        Guides
+                    </Heading>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua. Vitae elementum curabitur vitae nunc. Turpis egestas maecenas
+                        pharetra convallis posuere morbi leo urna. Amet consectetur adipiscing elit ut aliquam purus.
+                        Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo.
+                    </p>
                 </Card>
-                <Card>
-                    <Heading level="h3">Examples</Heading>
+                <Card className={styles.block}>
+                    <Heading level="h4" as="p">
+                        Examples
+                    </Heading>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua. Vitae elementum curabitur vitae nunc. Turpis egestas maecenas
+                        pharetra convallis posuere morbi leo urna. Amet consectetur adipiscing elit ut aliquam purus.
+                        Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo.
+                    </p>
                 </Card>
-                <Card>
-                    <Heading level="h3">Documentation</Heading>
+                <Card className={styles.block}>
+                    <Heading level="h4" as="p">
+                        Documentation
+                    </Heading>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua. Vitae elementum curabitur vitae nunc. Turpis egestas maecenas
+                        pharetra convallis posuere morbi leo urna. Amet consectetur adipiscing elit ut aliquam purus.
+                        Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo.
+                    </p>
                 </Card>
             </div>
         </View>

diff --git a/docs/src/styles/base.css b/docs/src/styles/base.css
diff --git a/docs/src/styles/base.scss b/docs/src/styles/base.scss
@@ -0,0 +1 @@
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
         "prepare": "husky install",
         "dev": "concurrently -i --raw npm:dev:*",
         "dev:docs": "turbo dev --filter=@nordcom/nordstar-docs",
-        "dev:packages": "npm run build:packages && turbo dev --filter=!@nordcom/nordstar-docs --filter=!@nordcom/nordstar-storybook",
+        "dev:packages": "turbo dev --filter=!@nordcom/nordstar-docs --filter=!@nordcom/nordstar-storybook",
         "dev:storybook": "turbo dev --filter=@nordcom/nordstar-storybook",
         "build": "turbo build",
         "build:docs": "turbo build --filter=@nordcom/nordstar-docs",

diff --git a/packages/components/heading/src/heading.module.scss b/packages/components/heading/src/heading.module.scss
@@ -1,10 +1,8 @@
 .container {
-    margin: 0;
+    hyphens: auto;
 
-    &:not(:empty):after {
+    &:not(:empty):is(.h1, .h2):after {
         content: '.';
-        font-size: 0.75em;
-        line-height: 1;
     }
 
     &.h1 {
@@ -15,14 +13,31 @@
     }
     &.h2 {
         font-weight: 400;
-        font-size: 2.75rem;
-        line-height: 1.1;
+        font-size: 1.85rem;
+        line-height: 1.075;
         letter-spacing: 0.02rem;
         text-transform: lowercase;
         color: var(--color-foreground-secondary);
+
+        @media (min-width: 950px) {
+            font-size: 2rem;
+        }
     }
     &.h3 {
+        font-size: 1.6rem;
+        font-weight: 800;
+        line-height: 1;
+        text-transform: lowercase;
+
+        @media (min-width: 950px) {
+            font-size: 1.75rem;
+        }
     }
     &.h4 {
+        font-size: 0.9rem;
+        font-weight: 700;
+        line-height: 1;
+        text-transform: uppercase;
+        color: var(--color-foreground-secondary);
     }
 }
diff --git a/packages/components/view/src/view.module.scss b/packages/components/view/src/view.module.scss
@@ -3,10 +3,11 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
+    max-width: 100vw;
 
     .content {
         width: calc(100vw - calc(var(--layout-page-spacing) * 2));
-        max-width: var(--layout-page-width);
+        max-width: min(var(--layout-page-width), 100%);
         margin: var(--layout-page-spacing);
     }
 }
diff --git a/packages/core/system/src/nordstar-provider.module.scss b/packages/core/system/src/nordstar-provider.module.scss
@@ -1,17 +1,3 @@
 .container {
-    --block-padding: 1rem;
-    --block-border-width: 0.1rem;
-    --block-border-radius: 0.65rem;
-
-    --layout-page-width: 1200px;
-    --layout-page-spacing: 1.25rem;
-
-    --color-background: #000000;
-    --color-background-highlight: #262626;
-    --color-foreground: #fefefe;
-    --color-foreground-secondary: #828282;
-
-    background: var(--color-background);
-    color: var(--color-foreground);
-    font-family: var(--font-primary);
+    display: contents;
 }
diff --git a/packages/core/system/src/nordstar-provider.tsx b/packages/core/system/src/nordstar-provider.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import styles from './nordstar-provider.module.scss';
+import './styling.scss';
 
 export type NordstarProviderProps = {
     children: ReactNode;

diff --git a/packages/core/system/src/styling.scss b/packages/core/system/src/styling.scss
@@ -0,0 +1,67 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    width: 100vw;
+    max-width: 100vw;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-primary);
+    font-size: 14px;
+
+    // Touch actions
+    touch-action: pan-y;
+    overscroll-behavior: none auto;
+
+    // Deal with font rendering
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+    font-smooth: always;
+    text-rendering: optimizeLegibility;
+    text-size-adjust: auto;
+    font-size-adjust: ex-height ch-width from-font;
+}
+
+:root {
+    --block-padding: 1rem;
+    --block-border-width: 0.1rem;
+    --block-border-radius: 0.65rem;
+
+    --layout-page-width: 1200px;
+    --layout-page-spacing: 1.25rem;
+
+    --layout-section-spacing: 1rem;
+    --layout-section-padding: 1.75rem;
+
+    --color-background: #000000;
+    --color-background-highlight: #262626;
+    --color-foreground: #fefefe;
+    --color-foreground-secondary: #828282;
+
+    @media (min-width: 950px) {
+        --layout-page-spacing: 1.25rem;
+    }
+}
+
+* {
+    box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+    padding: 0;
+    line-height: normal;
+}
+
+p {
+    font-size: 0.9rem;
+}