@3squared/forge-ui-3 0.2.3 → 0.3.1

package/src/styles/components/_tile.scss

@@ -17,7 +17,12 @@
    @if $color == secondary {
      background-color: map-get($base-colors, "light") !important;
      border-color: black !important;
-   } @else {
+   } 
+   @else if $color == brand {
+     background-color: map-get($subtle-colors, $color + "-shade-1") !important;
+     border-color: map-get($base-colors, $color) !important;
+   }
+   @else{
      background-color: map-get($subtle-colors, $color + "-subtle") !important;
      border-color: map-get($base-colors, $color) !important;
    }

package/src/styles/utilities/_variables.scss

@@ -1,7 +1,14 @@
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
 
 //Forge Theme
+$brand: $indigo !default;
+$brand-dark: $indigo-800 !default;
+$brand-shade-1: $indigo-100 !default;
+$brand-shade-2: $indigo-300 !default;
+$brand-shade-3: $indigo-600 !default;
+
 $primary: #0077c8;
 $primary-dark: #006bb4;
 $primary-light: #e5f0f7;
@@ -23,6 +30,7 @@ $danger-light: #FCEBE9;
 $light: #f6f6f6;
 
 $base-colors: (
+  'brand': $brand,
   'primary': $primary,
   'secondary': $secondary,
   'success': $success,
@@ -35,6 +43,9 @@ $base-colors: (
 $badge-font-size: 0.75rem;
 
 $subtle-colors: (
+        'brand-shade-1': $brand-shade-1,
+        'brand-shade-2': $brand-shade-2,
+        'brand-shade-3': $brand-shade-3,
         'primary-subtle': $primary-light,
         'success-subtle': $success-light,
         'warning-subtle': $warning-light,
@@ -43,6 +54,7 @@ $subtle-colors: (
 );
 
 $dark-colors: (
+        'brand-dark': $brand-dark,
         'primary-dark': $primary-dark,
         'success-dark': $success-dark,
         'warning-dark': $warning-dark,
@@ -55,4 +67,28 @@ $dark-colors: (
   }
 }
 
-$theme-colors: map-merge-multiple($theme-colors, $base-colors, $subtle-colors, $dark-colors);
+$theme-colors: map-merge-multiple($theme-colors, $base-colors, $subtle-colors, $dark-colors);
+
+$brand-text-emphasis: shade-color($brand, 60%) !default;
+$brand-bg-subtle: $brand-shade-1 !default;
+$brand-border-subtle: tint-color($brand-dark, 60%) !default;
+
+@import 'bootstrap/scss/maps';
+
+$brand-theme-colors-text: (
+  "brand": $brand-text-emphasis
+);
+
+$theme-colors-text: map-merge($theme-colors-text, $brand-theme-colors-text);
+
+$brand-theme-colors-bg-subtle: (
+  "brand": $brand-bg-subtle
+);
+
+$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $brand-theme-colors-bg-subtle);
+
+$brand-theme-colors-border-subtle: (
+  "brand": $brand-border-subtle
+);
+
+$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $brand-theme-colors-border-subtle)

package/src/types/forge-types.ts

@@ -2,7 +2,7 @@ import { ColumnProps } from "primevue/column";
 import { FilterMatchModeOptions, FilterOperatorOptions } from "primevue/api";
 import { FileUploadStatus } from "../components/file-uploader/utilities/utilities";
 
-export type Severity = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | undefined
+export type Severity = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'brand' | undefined
 export type Size = 'sm' | 'md' | 'lg' | undefined
 export type BarPosition = 'top' | 'left' | 'none'