@mindvalley/design-system 3.1.2 → 3.2.1

package/docs/USAGE.md

@@ -52,6 +52,28 @@ If you use TailwindCSS in your project, using the colors is a simple two-step pr
   }
 ```
 
+For other brands eg B2B, you can access and combine colors from the core mindvalley brand
+and override the redefined colors using the b2b specific colors.
+
+```js
+  const { colors } = require('@mindvalley/design-system');
+  const { colors: b2bColors } = require('@mindvalley/design-system/b2b');
+
+  module.exports = {
+    theme: {
+      colors: {
+        ...color,
+        ...b2bColors
+      }
+    }
+  }
+```
+
+## Why the override?
+Both brands share color names, but their hues and shades are distinct. For instance, the reds, blues, teals, and purples in b2b differ. Therefore, the override is necessary to guarantee that a developer working on b2b receives the specific shades of colors associated with b2b.
+
+Here is full list of [b2b colors](https://www.figma.com/file/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?type=design&node-id=1-395&mode=design&t=SY5HTy1zbFO5p80n-0)
+
 #### Gradients
 
 For gradient you can use the following tailwindCSS gradients:
@@ -161,7 +183,7 @@ Let's say that you are trying to codify a button from a Figma design, and you wa
 
 *Note that*
 
-- The typography plugin by default, generates Kebab cased class names, such as `title-bold-1`.  However, you can customize the class name casing by passing a `casing` option to the plugin. Supported casing options include `snakeCase`, `camelCase`, and `pascalCase.`
+- The typography plugin by default, generates Kebab cased class names, such as `title-bold-1`.  However, you can customize the class name casing by passing a `casing` option to the plugin. Supported casing options include `snakeCase`, `camelCase`, `pascalCase`, and `noCase`.
 
 Here is how to pass the casing:
 
@@ -169,17 +191,17 @@ Here is how to pass the casing:
   module.exports = {
   ...
     plugins: [
-      require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ casing: "pascalCase" }),
+      require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ casing: "noCase" }),
     ],
     ...
   }
   ```
 
   Output:
-  When using `pascalCase`, the generated CSS class will look like this:
+  When using `noCase`, the generated CSS class will look like this:
 
   ```css
-  .TitleBold8 {
+  .titlebold8 {
     ...
   }
   ```
@@ -221,6 +243,81 @@ Since the typography classes are responsive, you don't need to add media queries
 }
 ```
 
+#### Configuring the brand
+The Mindvalley design system also supports multiple brands, including the core Mindvalley brand and a B2B (business-to-business) brand. Each brand has its own set of typography tokens that can be used to ensure consistency across different projects and platforms.
+
+To configure the typography for a specific brand within your TailwindCSS setup, you will need to adjust your `tailwind.config.js` file to include the brand-specific typography tokens.
+
+Here's how you can configure the brand:
+1. In your `tailwind.config.js` file, require and configure the typography plugin with the brand option.
+
+For the core Mindvalley brand:
+
+```js
+module.exports = {
+// ...
+  plugins: [
+    require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({
+      brands: ['mindvalley']
+    }),
+  ],
+  // ...
+}
+```
+This is the same as the default config and ends up rendering typography classes for Mindvalley's core
+design. You can omit this if you are working with just the normal Mindvalley brand.
+
+For the B2B brand:
+
+```js
+module.exports = {
+// ...
+  plugins: [
+    require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({
+      brands: ['mindvalley', 'b2b']
+    }),
+  ],
+  // ...
+}
+```
+
+This configuration will generate the necessary CSS classes for typography based on the tokens defined for each brand. 
+You can then use these classes in your HTML or JSX files to apply the correct typography styles for the brand 
+you are working on.
+
+Note: B2b brand builds on top of the core brand typography with an additional specific typography style. As such we have to have both options added to the brands config list for both to be included.
+
+Browse [B2B foundations figma file](https://www.figma.com/file/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?type=design&node-id=139-11&mode=design&t=SY5HTy1zbFO5p80n-0) to see the specific typography.
+
+
+#### Configuring the Prefix
+
+To customize the class names further, you can prepend a prefix to all typography class names generated by the plugin. This is particularly useful for specific naming conventions.
+
+Here is how to pass the prefix:
+
+```js
+module.exports = {
+  ...
+  plugins: [
+    require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({
+      prefix: "mv-type--", // Your desired prefix
+      // other options...
+    }),
+  ],
+  ...
+}
+
+Output:
+When using `mv-type--`, the generated CSS class will look like this:
+
+```css
+.mv-type--title-bold-3 {
+  ...
+}
+```
+
+
 #### Configuring the breakpoint
 
 By default, the plugin uses the `lg` breakpoint from the [screen size configuration](https://tailwindcss.com/docs/screens) in your Tailwind configuration. If you have a different configuration or naming convention for your Tailwind breakpoints, you can specify the identifier of the desired breakpoint using the `breakingPoint` option in the plugin configuration.

package/docs/icons/brand-icons.md

@@ -616,4 +616,4 @@
 
 ## Information
 
-Icons set last updated on Wed, 01 Nov 2023 06:54:55 GMT.
+Icons set last updated on Thu, 15 Feb 2024 02:55:10 GMT.