hans-ui-design-lib 1.0.0 → 1.0.2

package/README.md

@@ -49,6 +49,56 @@ import { HansButton } from 'hans-ui-design-lib';
 <HansButton label="Button"></HansButton>;
 ```
 
+The current 5 theme combinations are fully supported and represent the default preset system. But if your project needs a custom semantic palette, you can override the active combination at runtime:
+
+```tsx
+import { HansButton, setHansTheme } from 'hans-ui-design-lib';
+
+setHansTheme({
+  primary: {
+    strong: '#1e3a8a',
+    default: '#2563eb',
+    neutral: '#bfdbfe',
+  },
+  secondary: {
+    strong: '#9f1239',
+    default: '#e11d48',
+    neutral: '#fecdd3',
+  },
+  success: {
+    strong: '#166534',
+    default: '#22c55e',
+    neutral: '#bbf7d0',
+  },
+  danger: {
+    strong: '#991b1b',
+    default: '#ef4444',
+    neutral: '#fecaca',
+  },
+  warning: {
+    strong: '#92400e',
+    default: '#f59e0b',
+    neutral: '#fde68a',
+  },
+  info: {
+    strong: '#155e75',
+    default: '#06b6d4',
+    neutral: '#cffafe',
+  },
+  base: {
+    strong: '#334155',
+    default: '#64748b',
+    neutral: '#cbd5e1',
+  },
+  backgroundColor: '#f8fafc',
+  textColor: '#0f172a',
+});
+
+<HansButton label="Button"></HansButton>;
+```
+
+The dynamic object must include the same 23 color slots used by the built-in combinations. You can see more details about the palette customization in our Color System documentation session.
+
 ### Others:
 
 If you're using other Technologies like Angular for example, you don't have to install it with npm, you just have to import the CDN links. In the root index.html of your application, define:
@@ -72,7 +122,7 @@ If you're using other Technologies like Angular for example, you don't have to i
 </html>
 ```
 
-If you're using a technology like Angular, probably you're gonna have to declare CUSTOM_ELEMENTS_SCHEMA like this in your component:
+If you're using a technology like Angular, probably you're gonna have to declare `CUSTOM_ELEMENTS_SCHEMA` like this in your component:
 
 ```ts
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -90,6 +140,52 @@ And in your component html you can just call it like this, passing the props you
 <hans-button label="Button"></hans-button>
 ```
 
+You can also override the active combination dynamically in CDN/web component usage:
+
+```html
+<script>
+  window.HansUI.setTheme({
+    primary: {
+      strong: '#1e3a8a',
+      default: '#2563eb',
+      neutral: '#bfdbfe',
+    },
+    secondary: {
+      strong: '#9f1239',
+      default: '#e11d48',
+      neutral: '#fecdd3',
+    },
+    success: {
+      strong: '#166534',
+      default: '#22c55e',
+      neutral: '#bbf7d0',
+    },
+    danger: {
+      strong: '#991b1b',
+      default: '#ef4444',
+      neutral: '#fecaca',
+    },
+    warning: {
+      strong: '#92400e',
+      default: '#f59e0b',
+      neutral: '#fde68a',
+    },
+    info: {
+      strong: '#155e75',
+      default: '#06b6d4',
+      neutral: '#cffafe',
+    },
+    base: {
+      strong: '#334155',
+      default: '#64748b',
+      neutral: '#cbd5e1',
+    },
+    backgroundColor: '#f8fafc',
+    textColor: '#0f172a',
+  });
+</script>
+```
+
 ## 🧑‍💻 Development
 
 Clone the repo and install dependencies: