@bloom-housing/ui-components 7.3.2 → 8.0.1

package/src/tables/AgPagination.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import { Button, t } from "../..";
+import React from "react"
+import { Button, t } from "../.."
 
 type AgPaginationProps = {
-  totalItems: number;
-  totalPages: number;
-  currentPage: number;
-  itemsPerPage: number;
-  quantityLabel?: string;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
-  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>;
-  onPageChange?: (page: number) => void;
-  onPerPageChange?: (size: number) => void;
-};
+  totalItems: number
+  totalPages: number
+  currentPage: number
+  itemsPerPage: number
+  quantityLabel?: string
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>
+  onPageChange?: (page: number) => void
+  onPerPageChange?: (size: number) => void
+}
 
-const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100];
+const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100]
 
 const AgPagination = ({
   totalItems,
@@ -27,19 +27,19 @@ const AgPagination = ({
   onPerPageChange,
 }: AgPaginationProps) => {
   const onNextClick = () => {
-    setCurrentPage(currentPage + 1);
-    onPageChange && onPageChange(currentPage);
-  };
+    setCurrentPage(currentPage + 1)
+    onPageChange && onPageChange(currentPage)
+  }
 
   const onPrevClick = () => {
-    setCurrentPage(currentPage - 1);
-    onPageChange && onPageChange(currentPage);
-  };
+    setCurrentPage(currentPage - 1)
+    onPageChange && onPageChange(currentPage)
+  }
 
   const onRowLimitChange = (size: string) => {
-    setItemsPerPage(parseInt(size));
-    onPerPageChange && onPerPageChange(itemsPerPage);
-  };
+    setItemsPerPage(parseInt(size))
+    onPerPageChange && onPerPageChange(itemsPerPage)
+  }
 
   return (
     <div className="data-pager flex flex-col md:flex-row">
@@ -58,9 +58,7 @@ const AgPagination = ({
           <span className="field-label" id="lbTotalPages">
             {totalItems}
           </span>
-          {quantityLabel && (
-            <span className="field-label">{quantityLabel}</span>
-          )}
+          {quantityLabel && <span className="field-label">{quantityLabel}</span>}
         </div>
 
         <div className="flex mt-5 md:mt-0 md:items-center">
@@ -99,12 +97,12 @@ const AgPagination = ({
               {Array(totalPages)
                 .fill(totalPages)
                 .map((_, i) => {
-                  const value = i + 1;
+                  const value = i + 1
                   return (
                     <option key={value} value={value}>
                       {value}
                     </option>
-                  );
+                  )
                 })}
             </select>
           </div>
@@ -133,7 +131,7 @@ const AgPagination = ({
         </Button>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS };
+export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS }

package/src/tables/GroupedTable.tsx

@@ -68,7 +68,7 @@ export const GroupedTable = (props: GroupedTableProps) => {
     })
   })
 
-  const tableClasses = ["w-full", "text-sm"]
+  const tableClasses = ["w-full", "text-xs"]
   if (props.responsiveCollapse) {
     tableClasses.push("responsive-collapse")
   }

package/src/tables/StandardTable.tsx

@@ -222,7 +222,7 @@ export const StandardTable = (props: StandardTableProps) => {
     )
   })
 
-  const tableClasses = ["w-full", "text-sm"]
+  const tableClasses = ["w-full", "text-xs"]
   if (props.responsiveCollapse) {
     tableClasses.push("responsive-collapse")
   }

package/src/text/Description.scss

@@ -19,7 +19,7 @@
   @include clearfix;
 
   .description__title {
-    @apply text-lg;
+    @apply text-xl;
     @apply text-gray-800;
     @apply mb-3;
     clear: left;
@@ -36,7 +36,7 @@
   }
 
   .description__body {
-    @apply text-tiny;
+    @apply text-sm;
     @apply mb-5;
 
     @screen md {

package/src/text/Message.scss

@@ -5,7 +5,7 @@
   @apply font-semibold;
   @apply uppercase;
   @apply tracking-wider;
-  @apply text-sm;
+  @apply text-xs;
   @apply border-l-2;
   @apply border-primary;
 

package/src/text/Tag.docs.mdx

@@ -52,13 +52,13 @@ You can apply CSS variables to the `.tag` selector to customize the appearance o
 | ------------------------ | ----------- | ----------------------------------------------- | --------------------------------------------------- |
 | `--normal-padding`       | Size        | Padding of the normal (no variant) tag          | `--bloom-s3` (top/bottom) `--bloom-s5` (left/right) |
 | `--normal-rounded`       | Size        | The border radius of the normal tag             | `--bloom-rounded-md`                                |
-| `--normal-font-size`     | Size        | The font size of the normal tag                 | `--bloom-font-size-tiny`                            |
+| `--normal-font-size`     | Size        | The font size of the normal tag                 | `--bloom-font-size-sm`                              |
 | `--normal-font-weight`   | Font Weight | The font weight of the normal tag               | `normal`                                            |
 | `--pill-padding`         | Size        | Padding of the pill variant tag                 | `--bloom-s2` (top/bottom) `--bloom-s4` (left/right) |
 | `--pill-rounded`         | Size        | The border radius of the pill tag               | `--bloom-rounded-full`                              |
-| `--pill-font-size`       | Size        | The font size of the pill tag                   | `--bloom-font-size-tiny`                            |
+| `--pill-font-size`       | Size        | The font size of the pill tag                   | `--bloom-font-size-sm`                              |
 | `--pill-font-weight`     | Font Weight | The font weight of the pill tag                 | `600`                                               |
 | `--pill-text-transform`  | Case        | Text case of of the pill tag                    | `uppercase`                                         |
 | `--pill-letter-spacing`  | Size        | The average gap between letters of the pill tag | `--bloom-letter-spacing-ultrawide`                  |
 | `--small-pill-padding`   | Size        | Padding of the small-size pill tag              | `--bloom-s1` (top/bottom) `--bloom-s3` (left/right) |  |
-| `--small-pill-font-size` | Size        | The font size of the small-size pill tag        | `--bloom-font-size-2xs`                             |
+| `--small-pill-font-size` | Size        | The font size of the small-size pill tag        | `--bloom-font-size-3xs`                             |

package/src/text/Tag.scss

@@ -2,12 +2,12 @@
   /* Component Variables */
   --normal-padding: var(--bloom-s3) var(--bloom-s5);
   --normal-rounded: var(--bloom-rounded-md);
-  --normal-font-size: var(--bloom-font-size-tiny);
+  --normal-font-size: var(--bloom-font-size-sm);
   --normal-font-weight: normal;
 
   --pill-padding: var(--bloom-s2) var(--bloom-s4);
   --pill-rounded: var(--bloom-rounded-full);
-  --pill-font-size: var(--bloom-font-size-tiny);
+  --pill-font-size: var(--bloom-font-size-sm);
   --pill-font-weight: 600;
   --pill-text-transform: uppercase;
   --pill-letter-spacing: var(--bloom-letter-spacing-ultrawide);
@@ -15,7 +15,7 @@
   --pill-capitalized-letter-spacing: var(--bloom-letter-spacing-wide);
 
   --small-pill-padding: var(--bloom-s1) var(--bloom-s3);
-  --small-pill-font-size: var(--bloom-font-size-2xs);
+  --small-pill-font-size: var(--bloom-font-size-3xs);
 
   /* Default Styles */
   padding: var(--normal-padding);
@@ -62,7 +62,7 @@
 
   &.is-secondary {
     color: var(--secondary-appearance-label-color, var(--bloom-color-white));
-    background-color: var(--secondary-appearance-background-color, var(--bloom-color-secondary));
+    background-color: var(--secondary-appearance-background-color, var(--bloom-color-primary-dark));
   }
 
   &.is-success {
@@ -72,7 +72,7 @@
     }
 
     &.is-light-mode {
-      color: var(--success-light-appearance-label-color, var(--bloom-color-gray-900));
+      color: var(--success-light-appearance-label-color, var(--bloom-color-gray-950));
       background-color: var(
         --success-light-appearance-background-color,
         var(--bloom-color-success-light)
@@ -90,7 +90,7 @@
     }
 
     &.is-light-mode {
-      color: var(--accent-cool-light-appearance-label-color, var(--bloom-color-gray-900));
+      color: var(--accent-cool-light-appearance-label-color, var(--bloom-color-gray-950));
       background-color: var(
         --accent-cool-light-appearance-background-color,
         var(--bloom-color-accent-cool)
@@ -108,7 +108,7 @@
     }
 
     &.is-light-mode {
-      color: var(--accent-warm-light-appearance-label-color, var(--bloom-color-gray-900));
+      color: var(--accent-warm-light-appearance-label-color, var(--bloom-color-gray-950));
       background-color: var(
         --accent-warm-light-appearance-background-color,
         var(--bloom-color-accent-warm)
@@ -127,7 +127,7 @@
   }
 
   &.is-small {
-    font-size: var(--bloom-font-size-sm);
+    font-size: var(--bloom-font-size-xs);
     padding-block: var(--bloom-s2);
     padding-inline: var(--bloom-s4);
   }

package/tailwind.config.js

@@ -13,12 +13,11 @@ module.exports = {
       print: { raw: "print" },
     },
     fontSize: {
+      "3xs": "var(--bloom-font-size-3xs)",
       "2xs": "var(--bloom-font-size-2xs)",
       xs: "var(--bloom-font-size-xs)",
       sm: "var(--bloom-font-size-sm)",
-      tiny: "var(--bloom-font-size-tiny)",
       base: "var(--bloom-font-size-base)",
-      "base-alt": "var(--bloom-font-size-base-alt)",
       lg: "var(--bloom-font-size-lg)",
       xl: "var(--bloom-font-size-xl)",
       "2xl": "var(--bloom-font-size-2xl)",
@@ -26,7 +25,6 @@ module.exports = {
       "4xl": "var(--bloom-font-size-4xl)",
       "5xl": "var(--bloom-font-size-5xl)",
       "6xl": "var(--bloom-font-size-6xl)",
-      "6.5xl": "var(--bloom-font-size-6_5xl)",
       "7xl": "var(--bloom-font-size-7xl)",
     },
     fontFamily: {
@@ -40,48 +38,65 @@ module.exports = {
       "primary-darker": "var(--bloom-color-primary-darker)",
       "primary-light": "var(--bloom-color-primary-light)",
       "primary-lighter": "var(--bloom-color-primary-lighter)",
-      secondary: "var(--bloom-color-secondary)",
       alert: "var(--bloom-color-alert)",
       "alert-light": "var(--bloom-color-alert-light)",
+      "alert-lighter": "var(--bloom-color-alert-lighter)",
       "alert-dark": "var(--bloom-color-alert-dark)",
+      "alert-darker": "var(--bloom-color-alert-darker)",
       success: "var(--bloom-color-success)",
       "success-light": "var(--bloom-color-success-light)",
+      "success-lighter": "var(--bloom-color-success-lighter)",
       "success-dark": "var(--bloom-color-success-dark)",
+      "success-darker": "var(--bloom-color-success-darker)",
       warn: "var(--bloom-color-warn)",
       "warn-light": "var(--bloom-color-warn-light)",
+      "warn-lighter": "var(--bloom-color-warn-lighter)",
       "warn-dark": "var(--bloom-color-warn-dark)",
+      "warn-darker": "var(--bloom-color-warn-darker)",
+      text: "var(--bloom-text-color)",
+      "text-light": "var(--bloom-text-color-light)",
+      "text-lighter": "var(--bloom-text-color-lighter)",
+      "text-dark": "var(--bloom-text-color-dark)",
+      "text-darker": "var(--bloom-text-color-darker)",
       "accent-cool": "var(--bloom-color-accent-cool)",
       "accent-cool-light": "var(--bloom-color-accent-cool-light)",
+      "accent-cool-lighter": "var(--bloom-color-accent-cool-lighter)",
       "accent-cool-dark": "var(--bloom-color-accent-cool-dark)",
+      "accent-cool-darker": "var(--bloom-color-accent-cool-darker)",
       "accent-warm": "var(--bloom-color-accent-warm)",
-      "accent-warm-dark": "var(--bloom-color-accent-warm-dark)",
       "accent-warm-light": "var(--bloom-color-accent-warm-light)",
       "accent-warm-lighter": "var(--bloom-color-accent-warm-lighter)",
-      lush: "var(--bloom-color-lush)",
+      "accent-warm-dark": "var(--bloom-color-accent-warm-dark)",
+      "accent-warm-darker": "var(--bloom-color-accent-warm-darker)",
       white: "var(--bloom-color-white)",
       black: "var(--bloom-color-black)",
       blue: {
-        800: "var(--bloom-color-blue-800)",
+        900: "var(--bloom-color-blue-900)",
         700: "var(--bloom-color-blue-700)",
-        600: "var(--bloom-color-blue-600)",
+        500: "var(--bloom-color-blue-500)",
         300: "var(--bloom-color-blue-300)",
-        200: "var(--bloom-color-blue-200)",
+        100: "var(--bloom-color-blue-100)",
       },
       red: {
+        900: "var(--bloom-color-red-900)",
         700: "var(--bloom-color-red-700)",
+        500: "var(--bloom-color-red-500)",
         300: "var(--bloom-color-red-300)",
+        100: "var(--bloom-color-red-100)",
       },
       yellow: {
+        900: "var(--bloom-color-yellow-900)",
         700: "var(--bloom-color-yellow-700)",
+        500: "var(--bloom-color-yellow-500)",
         300: "var(--bloom-color-yellow-300)",
+        100: "var(--bloom-color-yellow-100)",
       },
       green: {
+        900: "var(--bloom-color-green-900)",
         700: "var(--bloom-color-green-700)",
+        500: "var(--bloom-color-green-500)",
         300: "var(--bloom-color-green-300)",
-      },
-      teal: {
-        700: "var(--bloom-color-green-700)",
-        300: "var(--bloom-color-green-300)",
+        100: "var(--bloom-color-green-100)",
       },
       gray: {
         950: "var(--bloom-color-gray-950)",