@3squared/forge-ui-3 0.2.2 → 0.3.0

package/src/styles/main.scss

@@ -4,6 +4,7 @@
 @import 'components/_alert';
 @import 'components/_badge';
 @import 'components/_button';
+@import 'components/_chips';
 @import 'components/_datepicker';
 @import 'components/_dialog';
 @import 'components/_dropdown';

package/src/styles/utilities/_variables.scss

@@ -1,7 +1,12 @@
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
 
 //Forge Theme
+$brand: $indigo;
+$brand-light: $indigo-100;
+$brand-dark: $indigo-800;
+
 $primary: #0077c8;
 $primary-dark: #006bb4;
 $primary-light: #e5f0f7;
@@ -23,6 +28,7 @@ $danger-light: #FCEBE9;
 $light: #f6f6f6;
 
 $base-colors: (
+  'brand': $brand,
   'primary': $primary,
   'secondary': $secondary,
   'success': $success,
@@ -35,6 +41,7 @@ $base-colors: (
 $badge-font-size: 0.75rem;
 
 $subtle-colors: (
+        'brand-subtle': $brand-light,
         'primary-subtle': $primary-light,
         'success-subtle': $success-light,
         'warning-subtle': $warning-light,
@@ -43,6 +50,7 @@ $subtle-colors: (
 );
 
 $dark-colors: (
+        'brand-dark': $brand-dark,
         'primary-dark': $primary-dark,
         'success-dark': $success-dark,
         'warning-dark': $warning-dark,
@@ -55,4 +63,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-light !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'