Merge pull request #384 from qoretechnologies/feature/custom-intents

Added black and white intents, users can now define up to 5 custom intents.
qoretechnologies · May 29, 2024 · 6100c4f · 6100c4f
2 parents 63e1508 + 8019746
commit 6100c4f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/constants/theme.ts b/src/constants/theme.ts
@@ -90,9 +90,15 @@ export interface IReqoreIntents {
   warning?: TReqoreHexColor;
   danger?: TReqoreHexColor;
   muted?: TReqoreHexColor;
-}
+  black?: TReqoreHexColor;
+  white?: TReqoreHexColor;
 
-export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
+  custom1?: TReqoreHexColor;
+  custom2?: TReqoreHexColor;
+  custom3?: TReqoreHexColor;
+  custom4?: TReqoreHexColor;
+  custom5?: TReqoreHexColor;
+}
 
 export const DEFAULT_INTENTS: IReqoreIntents = {
   info: Colors.BLUE,
@@ -101,8 +107,18 @@ export const DEFAULT_INTENTS: IReqoreIntents = {
   warning: Colors.ORANGE,
   danger: Colors.RED,
   muted: Colors.GRAY,
+  black: Colors.DARK,
+  white: Colors.LIGHT,
+
+  custom1: Colors.GRAY,
+  custom2: Colors.GRAY,
+  custom3: Colors.GRAY,
+  custom4: Colors.GRAY,
+  custom5: Colors.GRAY,
 };
 
+export type TReqoreIntent = keyof IReqoreIntents;
+
 export const DEFAULT_THEME: IReqoreTheme = {
   main: Colors.DARK_THEME,
   text: {
@@ -119,4 +135,11 @@ export const ReqoreIntents: { [key: string]: TReqoreIntent } = {
   WARNING: 'warning',
   DANGER: 'danger',
   MUTED: 'muted',
+  BLACK: 'black',
+  WHITE: 'white',
+  CUSTOM1: 'custom1',
+  CUSTOM2: 'custom2',
+  CUSTOM3: 'custom3',
+  CUSTOM4: 'custom4',
+  CUSTOM5: 'custom5',
 };
diff --git a/src/stories/Button/Button.stories.tsx b/src/stories/Button/Button.stories.tsx
@@ -365,6 +365,35 @@ export const Muted: Story = {
   },
 };
 
+export const Black: Story = {
+  render: Template,
+
+  args: {
+    intent: 'black',
+  },
+};
+
+export const White: Story = {
+  render: Template,
+
+  args: {
+    intent: 'white',
+  },
+};
+
+export const CustomIntent: Story = {
+  render: Template,
+
+  args: {
+    otherThemeOptions: {
+      intents: {
+        custom3: '#5a025a',
+      },
+    },
+    intent: 'custom3',
+  },
+};
+
 export const Effect: Story = {
   render: Template,