@star-insure/sdk 5.0.0 → 5.0.2

package/package.json

@@ -2,7 +2,7 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "5.0.0",
+    "version": "5.0.2",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/components/common/Button.tsx

@@ -31,7 +31,7 @@ export default function Button({
     : 'font-black inline-flex items-center gap-3 justify-center text-white text-center px-5 py-2 rounded-md min-w-[120px] transition-all hover:brightness-110';
 
   const statusClass =
-    (status === 'primary' && 'bg-primary') ||
+    (status === 'primary' && 'bg-accent') ||
     (status === 'danger' && 'bg-red-500') ||
     (status === 'warning' && 'bg-yellow-400') ||
     (status === 'info' && 'bg-blue-400') ||

package/src/components/common/Modal.tsx

@@ -38,7 +38,7 @@ export default function Modal({ children, isActive = false, onClose, title, widt
                         leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     >
                         <div className={`${className} w-full align-start inline-block bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-7xl sm:p-6 ${width}`}>
-                            <div className={`flex gap-4 mb-4 text-secondary ${title ? 'border-b-2 border-secondary pb-4' : ''}`}>
+                            <div className={`flex gap-4 mb-4 text-primary ${title ? 'border-b-2 border-primary pb-4' : ''}`}>
                                 {title && <h3 className="font-black text-lg">{title}</h3>}
                                 <button type="button" onClick={onClose} className="ml-auto transition-all hover:opacity-50">
                                     <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

package/src/components/common/ToastItem.tsx

@@ -8,10 +8,10 @@ export default function ToastItem({ _id = '', message, status = 'default' }: Toa
 
     const defaultClasses = 'w-full min-w-[250px] p-4 shadow flex justify-between items-center font-black rounded-md not:';
 
-    const statusClasses = status === 'success' && 'bg-primary text-white'
+    const statusClasses = status === 'success' && 'bg-accent text-white'
         || status === 'error' && 'bg-red-500 text-white'
         || status === 'warning' && 'bg-yellow-400 text-white'
-        || 'bg-white text-secondary';
+        || 'bg-white text-primary';
 
     const classes = `${defaultClasses} ${statusClasses}`;
 

package/src/components/filter/Back.tsx

@@ -30,7 +30,7 @@ export function BackButton({ back, className }: { back?: string | boolean; class
     }, [breadcrumbs]);
 
     return (
-        <Link href={backUrl || '/'} className={cn(className, 'flex items-center justify-center text-back-button-text hover:text-primary transition-all')}>
+        <Link href={backUrl || '/'} className={cn(className, 'flex items-center justify-center text-primary hover:text-accent transition-all')}>
             <HiArrowLeft className="h-5 w-5 stroke-[1.25]" />
         </Link>
     );

package/src/components/filter/FilterItem.tsx

@@ -198,9 +198,9 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
             <div
                 onClick={() => handleClick()}
                 className={cn(
-                    'flex rounded-2xl border hover:cursor-pointer hover:border-primary bg-gray-600 px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-primary transition-colors',
+                    'flex rounded-2xl border hover:cursor-pointer hover:border-accent bg-gray-600 px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-accent transition-colors',
                     {
-                        '!bg-primary border-primary': hasFilters,
+                        '!bg-accent border-accent': hasFilters,
                     }
             )}>
                 <p className="whitespace-nowrap">{filter.label}</p>

package/src/components/filter/PageHeader.tsx

@@ -155,21 +155,21 @@ export default function PageHeader({
     return (
         <section className={cn('col-span-full flex items-center gap-2 max-w-full rounded-lg bg-white p-2 shadow', className)}>
             {back && (
-                <BackButton back={back} className="bg-back-button-background h-[60px] w-[60px] rounded" />
+                <BackButton back={back} className="bg-primary-100 h-[60px] w-[60px] rounded" />
             )}
 
-            <div className={cn('w-full grid grid-cols-[auto_1fr_auto_auto] h-[60px] rounded bg-page-header-background p-3 gap-4', innerClassName)}>
+            <div className={cn('w-full grid grid-cols-[auto_1fr_auto_auto] h-[60px] rounded bg-primary-100 p-3 gap-4', innerClassName)}>
                 <button
                     type="button"
                     disabled={!search}
                     onClick={() => setSearchActive(true)}
-                    className={cn('mr-auto flex items-center gap-4 transition-colors pr-6 pl-1 disabled:opacity-100 text-page-header-text', {
-                        'hover:text-primary': search && !isSearchActive,
+                    className={cn('mr-auto flex items-center gap-4 transition-colors pr-6 pl-1 disabled:opacity-100 text-primary', {
+                        'hover:text-accent': search && !isSearchActive,
                     }
                 )}>
                     {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} focusSearchShortcut={focusSearchShortcut} />}
 
-                    {!isSearchActive && <h1 className="text-base text-page-header-text font-black">{title}</h1>}
+                    {!isSearchActive && <h1 className="text-base text-primary font-black">{title}</h1>}
                 </button>
 
                 <div className="flex items-center ml-auto gap-2 h-full min-w-0 max-w-full">
@@ -189,7 +189,7 @@ export default function PageHeader({
                 </div>
 
                 {filteredActions.length > 0 && (
-                    <div className="flex items-center gap-3 bg-page-header-background">
+                    <div className="flex items-center gap-3 bg-primary-100">
                         {filterOptions.length > 0 && <div className="w-[1px] h-full bg-gray-300" />}
                         <nav className="flex items-center gap-2">
                             {filteredActions.map((action) => (

package/src/components/filter/SearchBar.tsx

@@ -86,7 +86,7 @@ export default function SearchBar({ search, active, onActive, placeholder, focus
                     title="Open Search Bar"
                     type="button"
                     onClick={() => onActive(true)}
-                    className="flex items-center justify-center rounded-full hover:text-primary p-1 hover:bg-gray-100"
+                    className="flex items-center justify-center rounded-full hover:text-accent p-1 hover:bg-gray-100"
                 >
                     <HiMagnifyingGlass className="h-5 w-5 stroke-[1.25]" />
                 </button>
@@ -94,7 +94,7 @@ export default function SearchBar({ search, active, onActive, placeholder, focus
             {active && (
                 <form
                     onSubmit={handleSearch}
-                    className="group flex items-center gap-2 rounded-full bg-white pr-4 pl-1 shadow transition-all focus-within:outline-none focus-within:ring-1 focus-within:ring-primary"
+                    className="group flex items-center gap-2 rounded-full bg-white pr-4 pl-1 shadow transition-all focus-within:outline-none focus-within:ring-1 focus-within:ring-accent"
                 >
                     <input
                         type="text"

package/src/components/forms/MoneyField.tsx

@@ -28,7 +28,7 @@ export default function MoneyField({ value = 0, onChange, name = 'value', id = '
     const displayValue = formatMoney(value, 0);
 
     return (
-        <div className={`${className} flex items-center gap-2 pl-4 rounded-md border border-gray-300 transition-all focus-within:border-primary focus-within:outline-none focus-within:ring focus-within:ring-primary focus-within:ring-opacity-50`}>
+        <div className={`${className} flex items-center gap-2 pl-4 rounded-md border border-gray-300 transition-all focus-within:border-accent focus-within:outline-none focus-within:ring focus-within:ring-accent focus-within:ring-opacity-50`}>
             <span className="font-bold pr-2">$</span>
             <input
                 type="text"

package/src/components/forms/RegistrationSearchField.tsx

@@ -228,7 +228,7 @@ export default function RegistrationSearchField({
           type="button"
           onClick={handleSearch}
           disabled={status === 'processing'}
-          className={cn(searchBtnClassName, "bg-primary px-4 py-3 rounded-md transition-all")}
+          className={cn(searchBtnClassName, "bg-accent px-4 py-3 rounded-md transition-all")}
         >
           <span className="sr-only">Search</span>
           <svg

package/src/components/tables/Table.tsx

@@ -8,7 +8,7 @@ export default function Table({ children, ...props }: Props) {
     return (
         <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8 text-sm">
             <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-                <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                <div className="overflow-hidden shadow ring-1 ring-gray-300 ring-opacity-5 md:rounded-lg">
                     <table {...props} className="min-w-full divide-y divide-gray-300">
                         {children}
                     </table>

package/src/components/tables/TableHead.tsx

@@ -8,7 +8,7 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSe
 
 export default function TableHead({ children, className, ...props }: Props) {
     return (
-        <thead {...props} className={cn(className, 'px-3 py-4 text-sm text-white bg-table-header-background')}>
+        <thead {...props} className={cn(className, 'px-3 py-4 text-sm text-white bg-gray-600')}>
             {children}
         </thead>
     )

package/src/components/tables/TableRow.tsx

@@ -8,7 +8,7 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRo
 }
 
 export default function TableRow({ children, className = '', onClick = () => {}, ...props }: Props) {
-    const bgClass = className.includes('bg') ? '' : 'bg-white even:bg-table-row-alternative-background'
+    const bgClass = className.includes('bg') ? '' : 'bg-white even:bg-gray-50'
 
     return (
         <tr {...props} className={cn(className, bgClass, 'hover:bg-gray-100')} onClick={(e) => onClick(e)}>

package/src/tailwind-preset.js

@@ -15,29 +15,71 @@ module.exports = {
         },
         extend: {
             colors: {
-                primary: 'var(--primary-color)',
-                'primary-300': 'var(--primary-300-color)',
-                'primary-100': 'var(--primary-100-color)',
-                'primary-700': 'var(--primary-700-color)',
-                secondary: 'var(--secondary-color)',
-                'page-background': 'var(--page-background-color)',
-                'footer-background': 'var(--footer-background-color)',
-                'page-header-background': 'var(--page-header-background-color)',
-                'page-header-text': 'var(--page-header-text-color)',
-                'back-button-background': 'var(--back-button-background-color)',
-                'back-button-text': 'var(--back-button-text-color)',
-                'section-title': 'var(--section-title-color)',
-                'sub-section-title': 'var(--sub-section-title-color)',
-                'section-separator': 'var(--section-separator-color)',
-                'section-header-background': 'var(--section-header-background-color)',
-                'section-header-text': 'var(--section-header-text-color)',
-                'card-subtitle': 'var(--card-subtitle-color)',
-                'card-alternative-background': 'var(--card-alternative-background-color)',
-                'table-header-background': 'var(--table-header-background-color)',
-                'table-header-text': 'var(--table-header-text-color)',
-                'table-row-alternative-background': 'var(--table-row-alternative-background-color)',
-                'gray-600': '#8a8c8e',
-                'gray-700': '#666',
+                primary: {
+                    DEFAULT: 'rgb(var(--primary-color))',
+                    100: 'rgb(var(--primary-100-color))',
+                },
+
+                secondary: {
+                    DEFAULT: 'rgb(var(--secondary-color))',
+                },
+
+                tertiary: {
+                    DEFAULT: 'rgb(var(--tertiary-color))',
+                },
+
+                accent: {
+                    DEFAULT: 'rgb(var(--accent-color))',
+                    100: 'rgb(var(--accent-100-color))',
+                    300: 'rgb(var(--accent-300-color))',
+                    500: 'rgb(var(--accent-500-color))',
+                    700: 'rgb(var(--accent-700-color))',
+                },
+
+                light: 'rgb(var(--light-color))',
+                dark: 'rgb(var(--dark-color))',
+                black: 'rgb(var(--black-color))',
+                white: 'rgb(var(--white-color))',
+
+                gray: {
+                    DEFAULT: 'rgb(var(--gray-color))',
+                    50: 'rgb(var(--gray-50-color))',
+                    100: 'rgb(var(--gray-100-color))',
+                    200: 'rgb(var(--gray-200-color))',
+                    300: 'rgb(var(--gray-300-color))',
+                    400: 'rgb(var(--gray-400-color))',
+                    500: 'rgb(var(--gray-500-color))',
+                    600: 'rgb(var(--gray-600-color))',
+                    700: 'rgb(var(--gray-700-color))',
+                    800: 'rgb(var(--gray-800-color))',
+                    900: 'rgb(var(--gray-900-color))',
+                },
+
+                red: {
+                    DEFAULT: 'rgb(var(--red-color))',
+                    50: 'rgb(var(--red-50-color))',
+                    100: 'rgb(var(--red-100-color))',
+                    200: 'rgb(var(--red-200-color))',
+                    300: 'rgb(var(--red-300-color))',
+                    400: 'rgb(var(--red-400-color))',
+                    500: 'rgb(var(--red-500-color))',
+                    600: 'rgb(var(--red-600-color))',
+                },
+
+                yellow: {
+                    DEFAULT: 'rgb(var(--yellow-color))',
+                    50: 'rgb(var(--yellow-50-color))',
+                    100: 'rgb(var(--yellow-100-color))',
+                    200: 'rgb(var(--yellow-200-color))',
+                    300: 'rgb(var(--yellow-300-color))',
+                    400: 'rgb(var(--yellow-400-color))',
+                    500: 'rgb(var(--yellow-500-color))',
+                    600: 'rgb(var(--yellow-600-color))',
+                },
+
+                danger: 'rgb(var(--danger-color))',
+                warning: 'rgb(var(--warning-color))',
+                info: 'rgb(var(--info-color))',
             },
             transitionDuration: {
                 DEFAULT: '300ms',

package/src/theme.css

@@ -1,30 +1,53 @@
 :root {
-    --primary-color: #6fc7b6;
-    --primary-300-color: #b8e1d9;
-    --primary-100-color: #f2f9f8;
-    --primary-700-color: #48aa97;
+    --primary-color: 43 56 68;
+    --primary-100-color: 243 244 246;
 
-    --secondary-color: #2b3844;
+    --secondary-color: 102 102 102;
 
-    --page-background-color: #f9fafb;
-    --footer-background-color: #e5e7eb;
+    --tertiary-color: 239 235 229;
 
-    --page-header-background-color: #f3f4f6;
-    --page-header-text-color: rgb(102, 102, 102);
-    --back-button-background-color: #f3f4f6;
-    --back-button-text-color: rgb(102, 102, 102);
+    --accent-color: 132 197 182;
+    --accent-100-color: 242 249 248;
+    --accent-300-color: 184 225 217;
+    --accent-500-color: 132 197 182;
+    --accent-700-color: 72 170 151;
 
-    --section-title-color: #6b7280;
-    --sub-section-title-color: rgb(102, 102, 102);
-    --section-separator-color: rgb(107, 114, 128);
+    --light-color: 249 250 251;
+    --dark-color: 102 102 102;
+    --black-color: 0 0 0;
+    --white-color: 255 255 255;
 
-    --section-header-background-color: #f3f4f6;
-    --section-header-text-color: rgb(102, 102, 102);
+    --gray-color: 102 102 102;
+    --gray-50-color: 249 250 251;
+    --gray-100-color: 243 244 246;
+    --gray-200-color: 229 231 235;
+    --gray-300-color: 209 213 219;
+    --gray-400-color: 156 163 175;
+    --gray-500-color: 107 114 128;
+    --gray-600-color: 138 140 142;
+    --gray-700-color: 102 102 102;
+    --gray-800-color: 31 41 55;
+    --gray-900-color: 17 24 39;
 
-    --card-subtitle-color: #2B3844;
-    --card-alternative-background-color: rgba(102, 102, 102, 0.07);
+    --red-color: 239 68 68;
+    --red-50-color: 254 242 242;
+    --red-100-color: 254 226 226;
+    --red-200-color: 254 202 202;
+    --red-300-color: 252 165 165;
+    --red-400-color: 248 113 113;
+    --red-500-color: 239 68 68;
+    --red-600-color: 220 38 38;
 
-    --table-header-background-color: #8a8c8e;
-    --table-header-text-color: #FFFFFF;
-    --table-row-alternative-background-color: #f9fafb;
+    --yellow-color: 250 204 21;
+    --yellow-50-color: 254 252 232;
+    --yellow-100-color: 245 249 195;
+    --yellow-200-color: 254 240 138;
+    --yellow-300-color: 253 224 71;
+    --yellow-400-color: 250 204 21;
+    --yellow-500-color: 234 179 8;
+    --yellow-600-color: 202 138 4;
+
+    --danger-color: 239 68 68;
+    --warning-color: 250 204 21;
+    --info-color: 96 165 250;
 }