@aleph-alpha/config-css 0.19.0 → 0.21.0

package/README.md

@@ -122,15 +122,16 @@ node packages/config-css-preset/src/utils/convert-fonts.js montserrat600.woff2 m
 ```
 
 This will:
+
 1. Read the WOFF2 font file
 2. Convert it to base64 format
 3. Generate a TypeScript file with an exported constant containing the base64 data
 4. The constant name is derived from the output filename
 
 The generated TypeScript file will look like:
+
 ```typescript
-export const montserrat600 =
-  'data:@file/octet-stream;base64,<base64-encoded-font-data>';
+export const montserrat600 = 'data:@file/octet-stream;base64,<base64-encoded-font-data>';
 ```
 
 ## Config CSS Preset helps in UI Customization

package/customization.md

@@ -12,6 +12,7 @@ The Config CSS Preset enables customization of two main visual aspects:
 - **Color Themes**: Brand and core UI colors used throughout applications
 
 These customizations are automatically applied to:
+
 - All components from `@aleph-alpha/ds-components-vue`
 - Any Pharia applications that consume the `@aleph-alpha/config-css` package
 
@@ -22,25 +23,31 @@ These customizations are automatically applied to:
 Config CSS Preset uses a sophisticated transformation process to make fonts customizable across the entire design system:
 
 #### 1. Token Processing
+
 The system processes font tokens defined in [`tokens.json`](https://gitlab.aleph-alpha.de/engineering/frontend-hub/-/blob/main/packages/config-css-preset/tokens.json) using Style Dictionary, a build system for design tokens.
 
 #### 2. Custom Transform Application
+
 A custom Style Dictionary transform called `custom/typography/font-family` (defined in the [config file](https://gitlab.aleph-alpha.de/engineering/frontend-hub/-/blob/main/packages/config-css-preset/sd.config.js)) processes these tokens.
 
 #### 3. Variable Substitution
+
 The transform replaces hardcoded font family references with CSS custom properties:
 
 **Before transformation:**
+
 ```css
 font-family: 'Raleway';
 ```
 
 **After transformation:**
+
 ```css
 font-family: var(--custom-font-family, Raleway);
 ```
 
 This approach ensures that:
+
 - All typography classes automatically expose the customizable font family variable
 - Applications can override fonts by simply updating the `--custom-font-family` CSS variable
 - A fallback font (Raleway) is always available if no custom font is specified
@@ -57,13 +64,16 @@ Currently, Config CSS Preset provides built-in support for two font families thr
 You have two options for extending font family support:
 
 #### Option 1: Extend the Preset (Recommended for System-Wide Fonts)
+
 Add new font definitions to the existing preset file by following the established code patterns. This approach makes fonts available across all applications using the preset.
 
 #### Option 2: Application-Level Implementation (Recommended for App-Specific Fonts)
+
 1. Define your custom `@font-face` declarations in your Pharia application
 2. Update the `--custom-font-family` CSS variable to reference your custom font
 
 **Example:**
+
 ```css
 @font-face {
   font-family: 'MyCustomFont';
@@ -80,15 +90,14 @@ Add new font definitions to the existing preset file by following the establishe
 ### Updating Font Variables
 
 #### JavaScript Method
+
 ```javascript
 // Update font family dynamically
-document.documentElement.style.setProperty(
-  '--custom-font-family',
-  'Your-Custom-Font-Family'
-);
+document.documentElement.style.setProperty('--custom-font-family', 'Your-Custom-Font-Family');
 ```
 
 #### CSS Method
+
 ```css
 :root {
   --custom-font-family: 'Your-Custom-Font-Family';
@@ -106,13 +115,17 @@ Config CSS Preset transforms design system color tokens into customizable CSS va
 To discover all available color tokens in your system:
 
 #### 1. Build the Token Files
+
 Run the following command from your project root:
+
 ```bash
 nx run config-css-preset:build
 ```
 
 #### 2. Examine Generated Files
+
 This command generates a structured output directory:
+
 ```
 config-css-preset/
   sd-output/
@@ -125,7 +138,9 @@ config-css-preset/
 ```
 
 #### 3. Review Color Tokens
+
 Open `config-css-preset/sd-output/light-mode.json` to see all available color tokens, including:
+
 - `brand-*` tokens: Brand-specific colors
 - `core-*` tokens: Core UI and system colors
 
@@ -136,18 +151,21 @@ The Config CSS Preset automatically transforms design tokens into CSS custom pro
 #### Transformation Examples
 
 **Brand Background Token:**
+
 ```
 Design Token: brand-bg-brand
 CSS Variable: --un-preset-theme-colors-brand-bg-brand
 ```
 
 **Core Content Token:**
+
 ```
 Design Token: core-content-secondary
 CSS Variable: --un-preset-theme-colors-core-content-secondary
 ```
 
 #### Naming Convention Breakdown
+
 - **Prefix**: `--un-preset-theme-colors-`
 - **Token Name**: The original design token name (e.g., `brand-bg-brand`)
 - **Result**: A globally accessible CSS custom property
@@ -162,34 +180,33 @@ Color values in Config CSS Preset use a specific RGB format optimized for flexib
 ### Updating Color Variables
 
 #### JavaScript Method
+
 ```javascript
 // Update a specific color token
 document.documentElement.style.setProperty(
   '--un-preset-theme-colors-brand-bg-brand',
-  '255 128 0' // RGB values for orange
+  '255 128 0', // RGB values for orange
 );
 
 // Update multiple colors programmatically
 const customColors = {
   'brand-bg-brand': '255 128 0',
   'core-content-secondary': '64 64 64',
-  'core-bg-primary': '248 250 252'
+  'core-bg-primary': '248 250 252',
 };
 
 Object.entries(customColors).forEach(([token, value]) => {
-  document.documentElement.style.setProperty(
-    `--un-preset-theme-colors-${token}`,
-    value
-  );
+  document.documentElement.style.setProperty(`--un-preset-theme-colors-${token}`, value);
 });
 ```
 
 #### CSS Method
+
 ```css
 :root {
   /* Brand colors */
   --un-preset-theme-colors-brand-bg-brand: 255 128 0;
-  
+
   /* Core UI colors */
   --un-preset-theme-colors-core-content-secondary: 64 64 64;
   --un-preset-theme-colors-core-bg-primary: 248 250 252;
@@ -199,13 +216,17 @@ Object.entries(customColors).forEach(([token, value]) => {
 ## Technical Architecture
 
 ### Style Dictionary Integration
+
 Config CSS Preset leverages Style Dictionary's token transformation capabilities to:
+
 - Process design tokens from JSON files
 - Apply custom transforms for font and color handling
 - Generate CSS custom properties with consistent naming
 
 ### UnoCSS Preset Integration
+
 The UnoCSS preset automatically:
+
 - Generates utility classes based on design tokens
 - Creates CSS custom properties for runtime customization
 - Ensures consistent theming across atomic CSS classes