@bloom-housing/ui-components 4.2.3 → 4.3.0

package/src/global/mixins.scss

@@ -13,42 +13,45 @@
 
 // Adds full screen image to pseudo element
 @mixin overlay-image() {
-  @apply block;
-  @apply absolute;
-  @apply inset-0;
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   content: "";
   z-index: 2;
 }
 
 @mixin clearfix() {
   &::after {
-    @apply table;
-    @apply clear-both;
+    display: table;
+    clear: both;
     content: "";
   }
 }
 
 @mixin has-toggle() {
   &:after {
-    @apply font-bold;
-    @apply inline-block;
-    @apply ml-2;
-    @apply mr-2;
-    @apply text-sm;
+    font-weight: bold;
+    display: inline-block;
+    margin-left: var(--bloom-s2);
+    margin-right: var(--bloom-s2);
+    font-size: var(--bloom-font-size-sm);
     content: "⌃";
     transform: rotate(180deg) translateY(2px);
   }
   &[aria-expanded="true"]:after {
-    @apply mr-5;
+    margin-right: var(--bloom-s5);
     transform: rotate(0deg) translateY(2px);
   }
 }
 
 @mixin has-image-skeleton() {
-  @apply bg-gray-500;
+  background-color: var(--bloom-color-gray-500);
 
   &::before {
-    @apply float-left;
+    float: left;
     content: "";
     width: 1px;
     margin-left: -1px;
@@ -58,104 +61,118 @@
 
   &::after {
     /* to clear float */
-    @apply table;
-    @apply clear-both;
+    display: table;
+    clear: both;
     content: "";
   }
 }
 
 @mixin filled-appearances() {
   &.is-primary {
-    @apply bg-primary;
-    @apply border-primary;
-    @apply text-white;
+    background-color: var(--primary-appearance-background-color, var(--bloom-color-primary));
+    border-color: var(--primary-appearance-border-color, var(--bloom-color-primary));
+    color: var(--primary-appearance-label-color, var(--bloom-color-white));
 
     &:hover {
-      @apply bg-primary-dark;
-      @apply border-primary-dark;
+      background-color: var(
+        --primary-appearance-hover-background-color,
+        var(--bloom-color-primary-dark)
+      );
+      border-color: var(--primary-appearance-hover-border-color, var(--bloom-color-primary-dark));
+      color: var(--primary-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
 
   &.is-success {
-    @apply bg-success;
-    @apply border-success;
-    @apply text-white;
+    background-color: var(--success-appearance-background-color, var(--bloom-color-success));
+    border-color: var(--success-appearance-border-color, var(--bloom-color-success));
+    color: var(--success-appearance-label-color, var(--bloom-color-white));
 
     &:hover {
-      @apply bg-success-dark;
+      background-color: var(
+        --success-appearance-hover-background-color,
+        var(--bloom-color-success-dark)
+      );
+      border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success));
+      color: var(--success-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
 
   &.is-alert {
-    @apply bg-alert;
-    @apply border-alert;
-    @apply text-white;
+    background-color: var(--bloom-color-alert);
+    border-color: var(--bloom-color-alert);
+    color: var(--bloom-color-white);
 
     &:hover {
-      @apply bg-alert-dark;
-      @apply border-alert-dark;
+      background-color: var(--bloom-color-alert-dark);
+      border-color: var(--bloom-color-alert-dark);
     }
   }
 
   &.is-warning {
-    @apply bg-warn;
-    @apply border-warn;
-    @apply text-gray-800;
+    background-color: var(--bloom-color-warn);
+    border-color: var(--bloom-color-warn);
+    color: var(--bloom-color-gray-800);
 
     &:hover {
-      @apply text-white;
-      @apply bg-warn-dark;
-      @apply border-warn-dark;
+      color: var(--bloom-color-white);
+      background-color: var(--bloom-color-warn-dark);
+      border-color: var(--bloom-color-warn-dark);
     }
   }
 
   &.is-borderless {
-    @apply text-primary-darker;
+    color: var(--bloom-color-primary-darker);
     border-color: transparent;
     background: transparent;
 
     &:hover {
       background: transparent;
-      @apply text-primary-darker;
+      border-color: transparent;
+      color: var(--bloom-color-primary-darker);
     }
   }
 }
 
 @mixin outlined-appearances() {
-  @apply bg-white;
-  @apply text-primary;
-  @apply border-2;
-  @apply border-primary;
+  background-color: var(--bloom-color-white);
+  color: var(--bloom-color-primary);
+  border-width: var(--bloom-border-2);
+  border-color: var(--bloom-color-primary);
 
   &:hover {
-    @apply bg-primary-dark;
-    @apply text-white;
+    background-color: var(
+      --outlined-appearance-hover-background-color,
+      var(--bloom-color-primary-dark)
+    );
+    border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary));
+    color: var(--outlined-appearance-hover-label-color, var(--bloom-color-white));
   }
 
   &.is-outlined {
     background: transparent;
 
     &.is-success {
-      @apply text-success;
+      color: var(--bloom-color-success);
 
       &:hover {
-        @apply text-white;
+        color: var(--bloom-color-white);
       }
     }
 
     &.is-alert {
-      @apply text-alert;
+      color: var(--bloom-color-alert);
 
       &:hover {
-        @apply text-white;
+        color: var(--bloom-color-white);
       }
     }
 
     &.is-warning {
-      @apply text-gray-800;
+      color: var(--bloom-color-gray-800);
 
       &:hover {
-        @apply text-white;
+        color: var(--bloom-color-white);
       }
     }
   }

package/src/global/tables.scss

@@ -1,3 +1,62 @@
+/* Hat tip to this CSS solution:
+https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
+
+//@screen md
+@media screen and (max-width: 767px) {
+  table.responsive-collapse {
+    thead {
+      @apply hidden;
+    }
+
+    tr {
+      @apply block;
+      @apply mb-6;
+    }
+
+    tr:nth-of-type(even) {
+      background: inherit;
+    }
+
+    td:nth-of-type(even) {
+      @apply bg-primary-lighter;
+    }
+
+    td {
+      @apply block;
+      @apply text-right;
+      border: 0px;
+      display: flex;
+      @apply py-2;
+    }
+
+    td:before {
+      @apply font-bold;
+      @apply uppercase;
+      content: attr(data-label);
+      text-align: left;
+      width: 50%;
+    }
+
+    td:last-child {
+      @apply border-b-0;
+    }
+  }
+  table.base {
+    td:nth-of-type(even) {
+      background: transparent;
+    }
+    tbody td {
+      @apply border-0;
+    }
+  }
+
+  tr.group-reserved td {
+    @apply border-l-8;
+    @apply border-solid;
+    @apply border-accent-warm;
+  }
+}
+
 table {
   @apply text-gray-750;
 
@@ -85,6 +144,183 @@ table {
       text-align: right;
     }
   }
+
+  &.stacked-table {
+    .stacked-table-cell-container {
+      td:before {
+        @apply text-base;
+        @apply text-gray-700;
+      }
+
+      @screen md {
+        @apply flex;
+        @apply flex-col;
+        @apply px-0;
+        @apply text-left;
+        @apply w-full;
+      }
+      width: 50%;
+      @apply text-right;
+      @apply pl-2;
+
+      .stacked-table-cell {
+        @apply font-semibold;
+        @apply text-gray-750;
+        @apply text-base;
+      }
+
+      .stacked-table-subtext {
+        @apply text-sm;
+        @apply text-gray-700;
+        @apply pl-1;
+        @apply font-normal;
+        @screen md {
+          @apply pl-0;
+        }
+      }
+
+      @apply pr-0;
+      @screen md {
+        @apply pr-3;
+      }
+    }
+
+    .stacked-table-header {
+      @apply px-0;
+      @apply text-base;
+      @apply text-gray-700;
+      @screen md {
+        @apply py-3;
+      }
+      @apply py-2;
+    }
+
+    thead {
+      @apply border-b;
+    }
+
+    td:last-child,
+    th:last-child {
+      .stacked-table-cell-container {
+        @apply text-right;
+        @apply pr-0;
+        @screen md {
+          width: auto;
+        }
+        width: 100%;
+      }
+    }
+  }
+
+  &.category-table {
+    thead {
+      height: 2rem;
+      @apply border-0;
+    }
+
+    .stacked-table-header {
+      @apply align-baseline;
+      @apply text-black;
+      @apply normal-case;
+      @apply px-0;
+      @apply pb-0;
+      @apply text-sm;
+      @screen md {
+        @apply py-3;
+      }
+      @apply pt-0;
+      @apply pb-2;
+    }
+
+    td:before {
+      @apply align-baseline;
+      @apply text-black;
+      @apply normal-case;
+      @apply px-0;
+      @apply pb-0;
+      @apply text-sm;
+      @apply pl-2;
+      @apply font-normal;
+    }
+
+    tr {
+      @apply mb-1;
+      td:first-child:before {
+        @apply pl-0;
+        @apply pr-2;
+        @apply font-semibold;
+        width: 50%;
+      }
+    }
+
+    td {
+      @md {
+        @apply py-3;
+      }
+      @apply py-0;
+    }
+
+    tbody td {
+      @apply border-0;
+    }
+
+    td:last-child,
+    th:last-child {
+      text-align: inherit;
+    }
+
+    .stacked-table-cell-container {
+      width: 50%;
+      @apply flex;
+      @apply flex-col;
+      @apply items-start;
+      @apply pl-2;
+      @apply text-left;
+      @screen md {
+        @apply pl-0;
+        @apply py-0;
+      }
+      .stacked-table-cell {
+        @screen md {
+          @apply text-base;
+        }
+        @apply text-sm;
+        @apply text-black;
+        @apply font-normal;
+      }
+      .stacked-table-subtext {
+        @apply pl-0;
+        @apply text-left;
+      }
+    }
+
+    td:last-child,
+    th:last-child {
+      .stacked-table-cell-container {
+        width: 50%;
+      }
+    }
+
+    tr {
+      td:first-child {
+        .stacked-table-cell:first-child {
+          @screen md {
+            display: block;
+          }
+          display: none;
+        }
+      }
+    }
+
+    @media screen and (max-width: 767px) {
+      td {
+        @apply pb-3;
+      }
+      td:first-child:before {
+        content: attr(data-cell);
+      }
+    }
+  }
 }
 
 table tr:nth-of-type(even) {
@@ -120,64 +356,6 @@ tr.group-reserved td:first-of-type {
   @apply border-accent-warm;
 }
 
-/* Hat tip to this CSS solution:
-https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
-
-//@screen md
-@media screen and (max-width: 767px) {
-  table.responsive-collapse {
-    thead {
-      @apply hidden;
-    }
-
-    tr {
-      @apply block;
-      @apply mb-6;
-    }
-
-    tr:nth-of-type(even) {
-      background: inherit;
-    }
-
-    td:nth-of-type(even) {
-      @apply bg-primary-lighter;
-    }
-
-    td {
-      @apply block;
-      @apply text-right;
-      border: 0px;
-      display: flex;
-    }
-
-    td:before {
-      @apply font-bold;
-      @apply uppercase;
-      content: attr(data-label);
-      text-align: left;
-      width: 50%;
-    }
-
-    td:last-child {
-      @apply border-b-0;
-    }
-  }
-  table.base {
-    td:nth-of-type(even) {
-      background: transparent;
-    }
-    tbody td {
-      @apply border-0;
-    }
-  }
-
-  tr.group-reserved td {
-    @apply border-l-8;
-    @apply border-solid;
-    @apply border-accent-warm;
-  }
-}
-
 .table__thumbnail img {
   max-height: 80px;
   max-width: 142px;

package/src/global/text.scss

@@ -88,8 +88,8 @@ h1.title {
 }
 
 .text-caps-tiny {
-  @apply mb-4;
-  @apply text-gray-700;
+  @apply mb-3;
+  @apply text-gray-750;
   @apply uppercase;
   @apply font-sans;
   @apply font-bold;
@@ -145,7 +145,8 @@ h1.title {
   @apply font-semibold;
   @apply text-blue-700;
   @apply text-3xl;
-  @apply mb-1;
+  @apply mb-3;
+  @apply leading-tight;
 }
 
 .card-subheader {
@@ -169,3 +170,10 @@ h1.title {
   @apply text-sm;
   @apply mb-3;
 }
+
+.category-header {
+  @apply font-alt-sans;
+  @apply font-semibold;
+  @apply text-gray-700;
+  @apply text-sm;
+}

package/src/global/tokens/borders.scss

@@ -0,0 +1,15 @@
+:root {
+  --bloom-rounded-sm: 0.125rem;
+  --bloom-rounded: 0.25rem;
+  --bloom-rounded-md: 0.375rem;
+  --bloom-rounded-lg: 0.5rem;
+  --bloom-rounded-xl: 0.75rem;
+  --bloom-rounded-2xl: 1rem;
+  --bloom-rounded-3xl: 1.5rem;
+  --bloom-rounded-full: 9999px;
+
+  --bloom-border-1: 1px;
+  --bloom-border-2: 2px;
+  --bloom-border-4: 4px;
+  --bloom-border-8: 8px;
+}

package/src/global/tokens/colors.scss

@@ -0,0 +1,64 @@
+:root {
+  --bloom-color-white: #ffffff;
+  --bloom-color-black: #000000;
+
+  --bloom-color-red-800: #b21d38;
+  --bloom-color-red-700: #e41d3d;
+  --bloom-color-red-300: #f9d2d8;
+
+  --bloom-color-green-800: #216e1f;
+  --bloom-color-green-700: #2e8540;
+  --bloom-color-green-300: #b4e5be;
+
+  --bloom-color-blue-800: #205493;
+  --bloom-color-blue-700: #0067be;
+  --bloom-color-blue-600: #0077da;
+  --bloom-color-blue-300: #daeeff;
+  --bloom-color-blue-200: #f5f8f9;
+
+  --bloom-color-yellow-800: #e5a000;
+  --bloom-color-yellow-700: #fdb81e;
+  --bloom-color-yellow-300: #fee8b6;
+
+  --bloom-color-gray-950: #242c2e;
+  --bloom-color-gray-900: #222222;
+  --bloom-color-gray-850: #333333;
+  --bloom-color-gray-800: #30383a;
+  --bloom-color-gray-750: #555555;
+  --bloom-color-gray-700: #767676;
+  --bloom-color-gray-600: #999999;
+  --bloom-color-gray-550: #aaaaaa;
+  --bloom-color-gray-500: #cccccc;
+  --bloom-color-gray-450: #dedee0;
+  --bloom-color-gray-400: #efefef;
+  --bloom-color-gray-300: #f6f6f6;
+  --bloom-color-gray-200: #f7f7f7;
+  --bloom-color-gray-100: #f9f9f9;
+
+  --bloom-color-primary: var(--bloom-color-blue-600);
+  --bloom-color-primary-dark: var(--bloom-color-blue-700);
+  --bloom-color-primary-darker: var(--bloom-color-blue-800);
+  --bloom-color-primary-light: var(--bloom-color-blue-300);
+  --bloom-color-primary-lighter: var(--bloom-color-blue-200);
+
+  --bloom-color-secondary: var(--bloom-color-blue-700);
+  --bloom-color-alert: var(--bloom-color-red-700);
+  --bloom-color-alert-light: var(--bloom-color-red-300);
+  --bloom-color-alert-dark: var(--bloom-color-red-800);
+  --bloom-color-success: var(--bloom-color-green-700);
+  --bloom-color-success-light: var(--bloom-color-green-300);
+  --bloom-color-success-dark: var(--bloom-color-green-800);
+  --bloom-color-warn: var(--bloom-color-yellow-700);
+  --bloom-color-warn-light: var(--bloom-color-yellow-300);
+  --bloom-color-warn-dark: var(--bloom-color-yellow-800);
+
+  --bloom-color-accent-cool: #00bed5;
+  --bloom-color-accent-cool-light: #c8f1ff;
+  --bloom-color-accent-cool-dark: #009db0;
+  --bloom-color-accent-warm: #ff6627;
+  --bloom-color-accent-warm-dark: #d54309;
+  --bloom-color-accent-warm-light: #ffd2c0;
+  --bloom-color-accent-warm-lighter: #fff7f3;
+
+  --bloom-color-lush: #99cd00;
+}

package/src/global/tokens/fonts.scss

@@ -0,0 +1,45 @@
+:root {
+  --bloom-font-sans: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
+  --bloom-font-serif: "Droid Serif", Georgia, Times, serif;
+  --bloom-font-alt-sans: Lato, Helvetica, Arial, Verdana, sans-serif;
+  --bloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  --bloom-font-size-2xs: 0.6875rem;
+  --bloom-font-size-xs: 0.75rem;
+  --bloom-font-size-sm: 0.8125rem;
+  --bloom-font-size-tiny: 0.875rem;
+  --bloom-font-size-base: 1rem;
+  --bloom-font-size-lg: 1.25rem;
+  --bloom-font-size-xl: 1.375rem;
+  --bloom-font-size-2xl: 1.5rem;
+  --bloom-font-size-3xl: 1.625rem;
+  --bloom-font-size-4xl: 2rem;
+  --bloom-font-size-5xl: 2.5rem;
+  --bloom-font-size-6xl: 3rem;
+  --bloom-font-size-6_5xl: 4rem;
+  --bloom-font-size-7xl: 4.5rem;
+
+  --bloom-letter-spacing-tightest: -0.075em;
+  --bloom-letter-spacing-tighter: -0.05em;
+  --bloom-letter-spacing-tight: -0.025em;
+  --bloom-letter-spacing-wide: 0.025em;
+  --bloom-letter-spacing-wider: 0.05em;
+  --bloom-letter-spacing-widest: 0.12em;
+  --bloom-letter-spacing-ultrawide: 0.25em;
+
+  --bloom-line-height-3: 0.75rem;
+  --bloom-line-height-4: 1rem;
+  --bloom-line-height-5: 1.25rem;
+  --bloom-line-height-6: 1.5rem;
+  --bloom-line-height-7: 1.75rem;
+  --bloom-line-height-8: 2rem;
+  --bloom-line-height-9: 2.25rem;
+  --bloom-line-height-10: 2.5rem;
+  --bloom-line-height-none: 1;
+  --bloom-line-height-tight: 1.25;
+  --bloom-line-height-snug: 1.375;
+  --bloom-line-height-normal: 1.5;
+  --bloom-line-height-relaxed: 1.625;
+  --bloom-line-height-loose: 2;
+}

package/src/global/tokens/screens.scss

@@ -0,0 +1,6 @@
+:root {
+  --bloom-screen-sm: #{$screen-sm};
+  --bloom-screen-md: #{$screen-md};
+  --bloom-screen-lg: #{$screen-lg};
+  --bloom-screen-xl: #{$screen-xl};
+}