@hellobetterdigitalnz/betterui 0.0.0 → 0.0.2

package/src/global.scss

@@ -1,231 +1,224 @@
-@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');
-
-:root {
-  --font: Figtree, sans-serif;
-  --body-font: Figtree, sans-serif;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  //font-size variables
-  --font-size-body-sm: 14px;
-  --font-size-body-xsm: 12px;
-  --font-size-body-regular: 16px;
-  --font-size-large: 18px;
-  --font-size-h1: 32px;
-  --font-size-h2: 24px;
-  --font-size-h3: 20px;
-  --font-size-h4: 18px;
-  --font-size-h5: 16px;
-  --font-size-label: 14px;
-  --font-size-input: 16px;
-  --font-size-button: 16px;
-
-  //font-weight variables
-  --font-weight-body-sm: 400;
-  --font-weight-body-xsm: 400;
-  --font-weight-body-regular: 400;
-  --font-weight-h1: 600;
-  --font-weight-h2: 600;
-  --font-weight-h3: 600;
-  --font-weight-h4: 600;
-  --font-weight-h5: 600;
-  --font-weight-label: 400;
-  --font-weight-input: 400;
-  --font-weight-button: 600;
-
-
-  //Line-height variables
-  --line-height-body-sm: 1.57;
-  --line-height-body-xsm: 1.83;
-  --line-height-body-regular: 1.5;
-  --line-height-h1: 1.25;
-  --line-height-h2: 1.33;
-  --line-height-h3: 1.4;
-  --line-height-h4: 1.44;
-  --line-height-h5: 1.5;
-  --line-height-label: 1.25;
-  --line-height-input: 1.5;
-  --line-height-button: 1;
-
-
-  --space-unit: 4px;
-  --spacing-1\/4: var(--space-unit);
-  --spacing-1\/2: calc(2 * var(--space-unit));
-  --spacing-3\/4: calc(3 * var(--space-unit));
-  --spacing-1: calc(4 * var(--space-unit));
-  --spacing-1-1\/4: calc(5 * var(--space-unit));
-  --spacing-1-1\/2: calc(6 * var(--space-unit));
-  --spacing-1-3\/4: calc(7 * var(--space-unit));
-  --spacing-2: calc(8 * var(--space-unit));
-  --spacing-2-1\/2: calc(10 * var(--space-unit));
-  --spacing-3: calc(12 * var(--space-unit));
-  --spacing-3-1\/2: calc(14 * var(--space-unit));
-  --spacing-4: calc(16 * var(--space-unit));
-  --spacing-4-1\/2: calc(18 * var(--space-unit));
-  --spacing-5: calc(20 * var(--space-unit));
-  --spacing-6: calc(24 * var(--space-unit));
-
-
-  --color-white: #FFFFFF;
-
-  --color-primary-50: #EEF6FC;
-  --color-primary-100: #CDE4F5;
-  --color-primary-200: #acd2ee;
-  --color-primary-300: #8ac0e7;
-  --color-primary-400: #69aee0;
-  --color-primary-500: #58A5DD;
-  --color-primary-600: #4684b1;
-  --color-primary-700: #356385;
-  --color-primary-800: #234258;
-  --color-primary-900: #12212c;
-  --color-primary-1000: #0f1c25;
-
-  --color-secondary-50: #eceef0;
-  --color-secondary-100: #d9dce2;
-  --color-secondary-200: #a1a8b6;
-  --color-secondary-300: #7b8598;
-  --color-secondary-400: #56627b;
-  --color-secondary-500: #43506C;
-  --color-secondary-600: #364056;
-  --color-secondary-700: #2f384c;
-  --color-secondary-800: #222836;
-  --color-secondary-900: #1b202b;
-  --color-secondary-1000: #191e28;
-
-  --color-gray-50: #FAFAFA;
-  --color-gray-100: #F5F5F5;
-  --color-gray-200: #EEEEEE;
-  --color-gray-300: #E0E0E0;
-  --color-gray-400: #BDBDBD;
-  --color-gray-500: #9E9E9E;
-  --color-gray-600: #757575;
-  --color-gray-700: #616161;
-  --color-gray-800: #424242;
-  --color-gray-900: #212121;
-  --color-gray-1000: #171717;
-
-
-  --color-success: #84BE39;
-  --color-error: #e12222;
-  --color-error-lite: rgba(225, 34, 34, 0.05);
-  --color-inprogress: #E9A116;
-
-  --color-lite:#FFFFFF;
-  --color-dark:#000000;
-
-  --drop-shadow-default: 0px 0px 2px 1px rgba(0, 0, 0, 0.05), 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
-  --drop-shadow-md: 0px 4px 4px 0px rgba(21, 19, 28, 0.06);
-  --drop-shadow-lg: 0px 8px 12px 0px rgba(21, 19, 28, 0.06);
-  --drop-shadow-xl: 0px 16px 24px 0px rgba(21, 19, 28, 0.06);
-  --drop-shadow-2xl:  0px 24px 40px 0px rgba(21, 19, 28, 0.06);
-
-
-}
-
-body {
-  font-family: var(--body-font);
-  font-size: var(--font-size-body-regular);
-  line-height: var(--line-height-body-regular);
-  font-weight: var(--font-weight-body-regular);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.typography {
-  h1 {
-    font-size: var(--font-size-h1);
-    line-height: var(--line-height-h1);
-    font-weight: var(--font-weight-h1);
-    margin-bottom: calc(var(--font-size-h1) * 0.75);
-  }
-
-  h2 {
-    font-size: var(--font-size-h2);
-    line-height: var(--line-height-h2);
-    font-weight: var(--font-weight-h2);
-    margin-bottom: calc(var(--font-size-h2) * 0.75);
-  }
-
-  h3 {
-    font-size: var(--font-size-h3);
-    line-height: var(--line-height-h3);
-    font-weight: var(--font-weight-h3);
-    margin-bottom: calc(var(--font-size-h3) * 0.75);
-  }
-
-  h4 {
-    font-size: var(--font-size-h4);
-    line-height: var(--line-height-h4);
-    font-weight: var(--font-weight-h4);
-    margin-bottom: calc(var(--font-size-h4) * 0.75);
-  }
-
-  h5 {
-    font-size: var(--font-size-h5);
-    line-height: var(--line-height-h5);
-    font-weight: var(--font-weight-h5);
-    margin-bottom: calc(var(--font-size-h5) * 0.75);
-  }
-
-  p {
-    margin-bottom: calc(var(--font-size-body-regular) * 0.75);
-  }
-
-  small {
-    font-size: var(--font-size-body-sm);
-    line-height: var(--line-height-body-sm);
-    color: var(--color-gray-600);
-    margin-top: calc(var(--font-size-body) * 0.75);
-  }
-
-  ul,
-  ol {
-    margin-left: calc(var(--spacing) * 5);
-    margin-bottom: calc(var(--font-size-body) * 0.75);
-  }
-
-  .large {
-    font-size: var(--font-size-large);
-
-    p {
-      margin-bottom: calc(var(--font-size-large) * 1.25);
-    }
-
-    ol,
-    ul {
-      margin-bottom: calc(var(--font-size-large) * 1.25);
-    }
-  }
-}
-
-
-
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap");
+
+:root {
+  --font: Figtree, sans-serif;
+  --body-font: Figtree, sans-serif;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  //font-size variables
+  --font-size-body-sm: 14px;
+  --font-size-body-xsm: 12px;
+  --font-size-body-regular: 16px;
+  --font-size-large: 18px;
+  --font-size-h1: 32px;
+  --font-size-h2: 24px;
+  --font-size-h3: 20px;
+  --font-size-h4: 18px;
+  --font-size-h5: 16px;
+  --font-size-label: 16px;
+  --font-size-input: 16px;
+  --font-size-button: 16px;
+
+  //font-weight variables
+  --font-weight-body-sm: 400;
+  --font-weight-body-xsm: 400;
+  --font-weight-body-regular: 400;
+  --font-weight-h1: 600;
+  --font-weight-h2: 600;
+  --font-weight-h3: 600;
+  --font-weight-h4: 600;
+  --font-weight-h5: 600;
+  --font-weight-label: 400;
+  --font-weight-input: 400;
+  --font-weight-button: 600;
+
+  //Line-height variables
+  --line-height-body-sm: 1.57;
+  --line-height-body-xsm: 1.83;
+  --line-height-body-regular: 1.5;
+  --line-height-h1: 1.25;
+  --line-height-h2: 1.33;
+  --line-height-h3: 1.4;
+  --line-height-h4: 1.44;
+  --line-height-h5: 1.5;
+  --line-height-label: 1.25;
+  --line-height-input: 1.5;
+  --line-height-button: 1;
+
+  --space-unit: 4px;
+  --spacing-1\/4: var(--space-unit);
+  --spacing-1\/2: calc(2 * var(--space-unit));
+  --spacing-3\/4: calc(3 * var(--space-unit));
+  --spacing-1: calc(4 * var(--space-unit));
+  --spacing-1-1\/4: calc(5 * var(--space-unit));
+  --spacing-1-1\/2: calc(6 * var(--space-unit));
+  --spacing-1-3\/4: calc(7 * var(--space-unit));
+  --spacing-2: calc(8 * var(--space-unit));
+  --spacing-2-1\/2: calc(10 * var(--space-unit));
+  --spacing-3: calc(12 * var(--space-unit));
+  --spacing-3-1\/2: calc(14 * var(--space-unit));
+  --spacing-4: calc(16 * var(--space-unit));
+  --spacing-4-1\/2: calc(18 * var(--space-unit));
+  --spacing-5: calc(20 * var(--space-unit));
+  --spacing-6: calc(24 * var(--space-unit));
+
+  --color-white: #ffffff;
+
+  --color-primary-50: #eef6fc;
+  --color-primary-100: #cde4f5;
+  --color-primary-200: #acd2ee;
+  --color-primary-300: #8ac0e7;
+  --color-primary-400: #69aee0;
+  --color-primary-500: #58a5dd;
+  --color-primary-600: #4684b1;
+  --color-primary-700: #356385;
+  --color-primary-800: #234258;
+  --color-primary-900: #12212c;
+  --color-primary-1000: #0f1c25;
+
+  --color-secondary-50: #eceef0;
+  --color-secondary-100: #d9dce2;
+  --color-secondary-200: #a1a8b6;
+  --color-secondary-300: #7b8598;
+  --color-secondary-400: #56627b;
+  --color-secondary-500: #43506c;
+  --color-secondary-600: #364056;
+  --color-secondary-700: #2f384c;
+  --color-secondary-800: #222836;
+  --color-secondary-900: #1b202b;
+  --color-secondary-1000: #191e28;
+
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #eeeeee;
+  --color-gray-300: #e0e0e0;
+  --color-gray-400: #bdbdbd;
+  --color-gray-500: #9e9e9e;
+  --color-gray-600: #757575;
+  --color-gray-700: #616161;
+  --color-gray-800: #424242;
+  --color-gray-900: #212121;
+  --color-gray-1000: #171717;
+
+  --color-success: #84be39;
+  --color-error: #e12222;
+  --color-error-lite: rgba(225, 34, 34, 0.05);
+  --color-inprogress: #e9a116;
+
+  --color-lite: #ffffff;
+  --color-dark: #000000;
+
+  --drop-shadow-default: 0px 0px 2px 1px rgba(0, 0, 0, 0.05),
+    0px 2px 10px 0px rgba(0, 0, 0, 0.15);
+  --drop-shadow-md: 0px 4px 4px 0px rgba(21, 19, 28, 0.06);
+  --drop-shadow-lg: 0px 8px 12px 0px rgba(21, 19, 28, 0.06);
+  --drop-shadow-xl: 0px 16px 24px 0px rgba(21, 19, 28, 0.06);
+  --drop-shadow-2xl: 0px 24px 40px 0px rgba(21, 19, 28, 0.06);
+
+  --bg-modal-color: #ffffff;
+}
+
+body {
+  font-family: var(--body-font);
+  font-size: var(--font-size-body-regular);
+  line-height: var(--line-height-body-regular);
+  font-weight: var(--font-weight-body-regular);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.typography {
+  h1 {
+    font-size: var(--font-size-h1);
+    line-height: var(--line-height-h1);
+    font-weight: var(--font-weight-h1);
+    margin-bottom: calc(var(--font-size-h1) * 0.75);
+  }
+
+  h2 {
+    font-size: var(--font-size-h2);
+    line-height: var(--line-height-h2);
+    font-weight: var(--font-weight-h2);
+    margin-bottom: calc(var(--font-size-h2) * 0.75);
+  }
+
+  h3 {
+    font-size: var(--font-size-h3);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+    margin-bottom: calc(var(--font-size-h3) * 0.75);
+  }
+
+  h4 {
+    font-size: var(--font-size-h4);
+    line-height: var(--line-height-h4);
+    font-weight: var(--font-weight-h4);
+    margin-bottom: calc(var(--font-size-h4) * 0.75);
+  }
+
+  h5 {
+    font-size: var(--font-size-h5);
+    line-height: var(--line-height-h5);
+    font-weight: var(--font-weight-h5);
+    margin-bottom: calc(var(--font-size-h5) * 0.75);
+  }
+
+  p {
+    margin-bottom: calc(var(--font-size-body-regular) * 0.75);
+  }
+
+  small {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    color: var(--color-gray-600);
+    margin-top: calc(var(--font-size-body) * 0.75);
+  }
+
+  ul,
+  ol {
+    margin-left: calc(var(--spacing) * 5);
+    margin-bottom: calc(var(--font-size-body) * 0.75);
+  }
+
+  .large {
+    font-size: var(--font-size-large);
+
+    p {
+      margin-bottom: calc(var(--font-size-large) * 1.25);
+    }
+
+    ol,
+    ul {
+      margin-bottom: calc(var(--font-size-large) * 1.25);
+    }
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/main.tsx

@@ -1,9 +1,10 @@
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
-import "./global.scss";
-
-createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./global.scss";
+import React from "react";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/variables.scss

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

package/.editorconfig

@@ -1,17 +0,0 @@
-# For more information about the properties used in
-# this file, please see the EditorConfig documentation:
-# http://editorconfig.org/
-
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
-

package/.eslintrc.cjs

@@ -1,14 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}

package/.storybook/main.ts

@@ -1,23 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: [
-    "../tokens/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm"
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,17 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-import '../src/global.scss';
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/tokens/color/color.mdx

@@ -1,82 +0,0 @@
-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>