@hellobetterdigitalnz/betterui 0.0.0

package/src/variables.scss

@@ -0,0 +1,2 @@
+$colors: "primary", "secondary", "gray";
+$colorVariations: "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000";

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tokens/color/color.mdx

@@ -0,0 +1,82 @@
+import {Meta, ColorPalette, ColorItem,} from "@storybook/blocks"
+
+
+<Meta title='Design Token/Colors'/>
+
+# Colors
+
+## Primary
+
+<ColorPalette>
+    <ColorItem
+        title="Primary"
+        colors={{
+            "50": 'var(--color-primary-50)',
+            "100": 'var(--color-primary-100)',
+            "200": 'var(--color-primary-200)',
+            "300": 'var(--color-primary-300)',
+            "300": 'var(--color-primary-400)',
+            "400": 'var(--color-primary-500)',
+            "500": 'var(--color-primary-600)',
+            "600": 'var(--color-primary-700)',
+            "700": 'var(--color-primary-800)',
+            "800": 'var(--color-primary-900)',
+            "900": 'var(--color-primary-1000)'
+        }}
+    />
+    <ColorItem
+        title="Secondary"
+        colors={{
+            "50": 'var(--color-secondary-50)',
+            "100": 'var(--color-secondary-100)',
+            "200": 'var(--color-secondary-200)',
+            "300": 'var(--color-secondary-300)',
+            "300": 'var(--color-secondary-400)',
+            "400": 'var(--color-secondary-500)',
+            "500": 'var(--color-secondary-600)',
+            "600": 'var(--color-secondary-700)',
+            "700": 'var(--color-secondary-800)',
+            "800": 'var(--color-secondary-900)',
+            "900": 'var(--color-secondary-1000)'
+        }}
+    />
+    <ColorItem
+        title="Gray"
+        colors={{
+            "50": 'var(--color-gray-50)',
+            "100": 'var(--color-gray-100)',
+            "200": 'var(--color-gray-200)',
+            "300": 'var(--color-gray-300)',
+            "300": 'var(--color-gray-400)',
+            "400": 'var(--color-gray-500)',
+            "500": 'var(--color-gray-600)',
+            "600": 'var(--color-gray-700)',
+            "700": 'var(--color-gray-800)',
+            "800": 'var(--color-gray-900)',
+            "900": 'var(--color-gray-1000)'
+        }}
+    />
+</ColorPalette>
+
+## System Colors
+
+<ColorPalette>
+    <ColorItem
+        title='--color-success'
+        colors={[
+            'var(--color-success)'
+        ]}
+    />
+    <ColorItem
+        title=' --color-error'
+        colors={[
+            'var( --color-error)'
+        ]}
+    />
+    <ColorItem
+        title='--color-inprogress'
+        colors={[
+            'var(--color-inprogress)'
+        ]}
+    />
+</ColorPalette>

package/tokens/shadow/shadow-panel.scss

@@ -0,0 +1,12 @@
+.shadow-panel{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: var(--color-lite);
+  max-width: 500px;
+  margin: 0px auto var(--spacing-2-1\/2) auto !important;
+  min-height: 300px;
+  border-radius: 8px;
+  margin-top: var(--spacing-2-1\/2) !important;
+}

package/tokens/shadow/shadow.mdx

@@ -0,0 +1,34 @@
+import {Meta} from "@storybook/blocks"
+import './shadow-panel.scss'
+
+
+<Meta title='Design Token/Shadow'/>
+
+# Shadows
+
+##
+
+<div className={'shadow-panel typography'} style={{ boxShadow: 'var(--drop-shadow-default)' }}>
+    <h5>Shadow for dropdown menus</h5>
+    <h5 className={'variable'}>var(--drop-shadow-default)</h5>
+</div>
+
+<div className={'shadow-panel typography'} style={{ boxShadow: 'var(--drop-shadow-md)' }}>
+    <h5>Shadow 1</h5>
+    <h5 className={'variable'}>var(--drop-shadow-md)</h5>
+</div>
+
+<div className={'shadow-panel typography'} style={{ boxShadow: 'var(--drop-shadow-lg)' }}>
+    <h5>Shadow 2</h5>
+    <h5 className={'variable'}>var(--drop-shadow-lg)</h5>
+</div>
+
+<div className={'shadow-panel typography'} style={{ boxShadow: 'var(--drop-shadow-xl)' }}>
+    <h5>Shadow 3</h5>
+    <h5 className={'variable'}>var(--drop-shadow-xl)</h5>
+</div>
+
+<div className={'shadow-panel typography'} style={{ boxShadow: 'var(--drop-shadow-2xl)' }}>
+    <h5>Shadow 4</h5>
+    <h5 className={'variable'}>var(--drop-shadow-2xl)</h5>
+</div>

package/tokens/typography/typography.mdx

@@ -0,0 +1,31 @@
+import {Meta, Typeset,} from "@storybook/blocks"
+
+
+<Meta title='Design Token/Typography'/>
+
+# Typography
+
+## Header
+
+<Typeset
+    fontSizes={['var(--font-size-h1)', 'var(--font-size-h2)', 'var(--font-size-h3)', 'var(--font-size-h4)', 'var(--font-size-h5)']}
+    sampleText='Hello there'
+    fontWeight={600}
+/>
+
+
+## Body tags
+
+<Typeset
+    fontSizes={['var(--font-size-body-regular)', 'var(--font-size-body-sm)', 'var(--font-size-body-xsm)']}
+    sampleText='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl quam, scelerisque et tellus in, semper vestibulum erat. Vestibulum non dolor vitae lectus aliquet laoreet non at felis.'
+    fontWeight={400}
+/>
+
+## Label tags
+
+<Typeset
+    fontSizes={['var(--font-size-label)']}
+    sampleText='Input label'
+    fontWeight={400}
+/>

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})