@marioschmidt/design-system-tokens 1.0.58 → 1.0.60

package/README.md

@@ -36,7 +36,7 @@ The BILD Design Ops Pipeline transforms design assets from Figma into production
 
 | Pipeline | Input | Output | Platforms |
 |----------|-------|--------|-----------|
-| **🎨 Token Pipeline** | Figma Variables | Design Tokens | 7 platforms |
+| **🎨 Token Pipeline** | Figma Variables | Design Tokens | 6 platforms (Flutter disabled) |
 | **🖼️ Icon Pipeline** | Figma Icons (SVG) | Multi-format Icons | 5 platforms |
 
 Both pipelines use the **TokenSync Figma Plugin** for automated exports.
@@ -108,13 +108,13 @@ Both pipelines use the **TokenSync Figma Plugin** for automated exports.
 │                             │    │                             │
 │  dist/                      │    │  dist/icons/                │
 │  ├── css/     (CSS Vars)    │    │  ├── svg/      (Optimized)  │
-│  ├── scss/    (SCSS Vars)   │    │  ├── react/    (ESM + d.ts) │
-│  ├── js/      (ES Modules)  │    │  ├── android/  (XML)        │
-│  ├── json/    (Raw Data)    │    │  ├── flutter/  (TTF + Dart) │
-│  ├── ios/     (Swift)       │    │  └── ios/      (xcassets)   │
-│  ├── android/ (XML)         │    │                             │
-│  ├── flutter/ (Dart)        │    │                             │
-│  └── bundles/ (Quick Start) │    │                             │
+│  │   └── bundles/ (Quick)   │    │  ├── react/    (ESM + d.ts) │
+│  ├── scss/    (SCSS Vars)   │    │  ├── android/  (XML)        │
+│  ├── js/      (ES Modules)  │    │  ├── flutter/  (TTF + Dart) │
+│  ├── json/    (Raw Data)    │    │  └── ios/      (xcassets)   │
+│  ├── ios/     (Swift)       │    │                             │
+│  └── android/ (XML)         │    │                             │
+│  (flutter/ disabled)        │    │                             │
 └──────────────┬──────────────┘    └──────────────┬──────────────┘
                │                                  │
                │  npm publish                     │  npm publish
@@ -159,8 +159,8 @@ import { textColorPrimary, space2x } from '@marioschmidt/design-system-tokens/js
 
 ```swift
 // iOS Swift
-view.backgroundColor = StyleDictionary.TextColorPrimary
-let padding: CGFloat = StyleDictionary.Space2x
+view.backgroundColor = StyleDictionary.textColorPrimary
+let padding: CGFloat = StyleDictionary.space2x
 ```
 
 ### Icon Usage
@@ -328,7 +328,7 @@ npm run clean:icons        # Remove dist/icons/
 | JSON | Raw Data | `dist/json/**/*.json` | ✅ Production |
 | iOS Swift | UIColor, CGFloat | `dist/ios/**/*.swift` | ✅ Production |
 | Android | XML Resources | `dist/android/**/*.xml` | ✅ Production |
-| Flutter | Dart Classes | `dist/flutter/**/*.dart` | ✅ Production |
+| Flutter | Dart Classes | `dist/flutter/**/*.dart` | ⏸️ Disabled |
 
 ### 🖼️ Icon Platforms
 
@@ -422,5 +422,5 @@ MIT License - See [LICENSE](./LICENSE) file.
 | Tokens | Icons |
 |--------|-------|
 | ~970 files | 5 platforms |
-| 7 platforms | TypeScript support |
+| 6 platforms | TypeScript support |
 | 3 brands | Accessibility ready |

package/README.tokens.md

@@ -32,10 +32,58 @@ Multi-platform design token transformation pipeline powered by **Style Dictionar
 This pipeline processes the multi-layer, multi-brand BILD Design System architecture:
 
 - **3 Brands**: BILD, SportBILD, Advertorial
-- **7 Platforms**: CSS, SCSS, JavaScript, JSON, iOS (Swift), Android (XML), Flutter (Dart)
+- **6 Platforms**: CSS, SCSS, JavaScript, JSON, iOS (Swift), Android (XML) *(Flutter disabled)*
 - **Multiple Modes**: Density (3), Breakpoints (4), Color Modes (2)
 - **Token Types**: Primitives, Semantic Tokens, Component Tokens (~970 files)
 
+### Token Architecture (4 Layers)
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  LAYER 4: Component Tokens                                                   │
+│  ─────────────────────────────────────────────────────────────────────────  │
+│  Button, Card, Teaser, Alert, InputField, etc.                              │
+│  Modes: color (light/dark), density, breakpoint, typography                 │
+│  References → Semantic Tokens                                               │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  LAYER 3: Semantic Tokens                                                    │
+│  ─────────────────────────────────────────────────────────────────────────  │
+│  text-color-primary, surface-color-secondary, border-color-*, etc.          │
+│  Modes: color (light/dark), breakpoint                                      │
+│  References → Brand Mapping                                                 │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  LAYER 2: Brand Mapping + Density                                            │
+│  ─────────────────────────────────────────────────────────────────────────  │
+│  BrandColorMapping: Color Primitives → Brands                               │
+│  BrandTokenMapping: Other Primitives → Brands                               │
+│  Density: compact, default, spacious                                        │
+│  Modes: BILD, SportBILD, Advertorial                                        │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  LAYER 1: Primitives (Global)                                                │
+│  ─────────────────────────────────────────────────────────────────────────  │
+│  colorprimitive, spaceprimitive, sizeprimitive, fontprimitive               │
+│  Absolute values: --bildred: #DD0000, --space2x: 16px                       │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### CSS var() Alias Chain
+
+Tokens use `var()` references to maintain the alias chain from Figma:
+
+```css
+/* Component → Semantic → Primitive */
+--button-primary-bg-color: var(--core-color-primary, #DD0000);
+                                ↓
+--core-color-primary: var(--bildred, #DD0000);
+                           ↓
+--bildred: #DD0000;
+```
+
+This enables:
+- **Theme switching** without recompiling (change primitives = change all)
+- **Brand switching** via data attributes
+- **Fallback values** for robustness
+
 ### Pipeline Flow
 
 ```
@@ -130,18 +178,22 @@ const Button = styled.button`
 import UIKit
 
 // Colors (UIColor objects)
-view.backgroundColor = StyleDictionary.TextColorPrimary
+view.backgroundColor = StyleDictionary.textColorPrimary
 
 // Dimensions (CGFloat Points)
-let padding: CGFloat = StyleDictionary.Space2x  // 16
+let padding: CGFloat = StyleDictionary.space2x  // 16
 
 // Typography
 label.font = UIFont.TypographyBildregular.display1
 ```
 
-### Flutter
+### Flutter (Currently Disabled)
+
+> **Note:** Flutter output is currently disabled via `FLUTTER_ENABLED = false` in build.js.
+> The code remains in place and can be re-enabled when needed.
 
 ```dart
+// When enabled:
 import 'package:design_tokens/brands/bild/semantic/color/colormode_light.dart';
 
 Container(
@@ -153,9 +205,9 @@ Container(
 
 ```xml
 <TextView
-    android:textColor="@color/text-color-primary"
-    android:padding="@dimen/space2x"
-    style="@style/Display1" />
+    android:textColor="@color/text_color_primary"
+    android:padding="@dimen/space_2x"
+    style="@style/TextAppearance.Bild.Display1" />
 ```
 
 ### SCSS
@@ -169,6 +221,61 @@ Container(
 }
 ```
 
+## Responsive CSS Architecture
+
+### Breakpoint Implementation
+
+Breakpoints use native `@media` queries instead of `data-breakpoint` attributes:
+
+```css
+/* Base values (xs breakpoint) */
+[data-brand="bild"] {
+  --headline1-font-size: 32px;
+}
+
+/* Responsive overrides */
+@media (min-width: 390px) {  /* sm */
+  [data-brand="bild"] { --headline1-font-size: 40px; }
+}
+@media (min-width: 600px) {  /* md */
+  [data-brand="bild"] { --headline1-font-size: 48px; }
+}
+@media (min-width: 1024px) { /* lg */
+  [data-brand="bild"] { --headline1-font-size: 64px; }
+}
+```
+
+**Breakpoint Values:**
+| Breakpoint | Min-Width | Use Case |
+|------------|-----------|----------|
+| `xs` | 320px | Mobile (default) |
+| `sm` | 390px | Large mobile |
+| `md` | 600px | Tablet |
+| `lg` | 1024px | Desktop |
+
+### Native Sizeclass Mapping (iOS/Android)
+
+For native platforms, 4 web breakpoints map to 2 size classes:
+
+```
+Web Breakpoints         Native Size Classes
+─────────────────       ───────────────────
+xs (320px) ─────┐
+                ├────→  compact (small screens)
+sm (390px) ─────┘
+
+md (600px) ─────┐
+                ├────→  regular (large screens)
+lg (1024px) ────┘
+```
+
+| Platform | Compact | Regular |
+|----------|---------|---------|
+| iOS | `UITraitCollection.horizontalSizeClass == .compact` | `.regular` |
+| Android | `sw320dp` | `sw600dp` |
+
+---
+
 ## Token Transform Reference
 
 ### Naming Conventions
@@ -178,8 +285,8 @@ Container(
 | CSS | `kebab-case` with `--` | `--text-color-primary` |
 | SCSS | `kebab-case` with `$` | `$text-color-primary` |
 | JavaScript | `camelCase` | `textColorPrimary` |
-| iOS Swift | `PascalCase` | `TextColorPrimary` |
-| Android | `kebab-case` | `text-color-primary` |
+| iOS Swift | `camelCase` | `textColorPrimary` |
+| Android | `snake_case` | `text_color_primary` |
 | Flutter | `camelCase` | `textColorPrimary` |
 
 ### Token Types
@@ -212,12 +319,34 @@ Container(
 
 **Note:** Figma exports opacity as percentage (5, 10, 70). Transform converts to decimal: `5` → `0.05`
 
+## Output Toggles
+
+The build pipeline supports toggles to enable/disable specific outputs:
+
+```javascript
+// In scripts/tokens/build.js
+
+// Platform output toggles
+const FLUTTER_ENABLED = false;        // Disables dist/flutter/ output
+
+// Token type toggles
+const BOOLEAN_TOKENS_ENABLED = false; // Excludes visibility tokens
+```
+
+| Toggle | Default | Description |
+|--------|---------|-------------|
+| `FLUTTER_ENABLED` | `false` | Flutter Dart output in `dist/flutter/` |
+| `BOOLEAN_TOKENS_ENABLED` | `false` | Boolean/visibility tokens (13 tokens like `hideOnMobile`) |
+
+---
+
 ## 📁 Output Structure
 
 ```
 dist/
 ├── css/
 │   ├── shared/                      # Primitives
+│   ├── bundles/                     # Convenience bundles (Quick Start)
 │   └── brands/
 │       └── bild/
 │           ├── density/
@@ -232,8 +361,7 @@ dist/
 ├── json/                            # Same structure
 ├── ios/                             # Swift Classes
 ├── android/                         # XML Resources
-├── flutter/                         # Dart Classes
-└── bundles/                         # Convenience bundles
+└── flutter/                         # Dart Classes (disabled by default)
 ```
 
 ## 🔗 Figma Integration & Dependencies
@@ -351,7 +479,9 @@ MIT License - See [LICENSE](./LICENSE) file.
 
 | Feature | Status |
 |---------|--------|
-| 7 Platforms | ✅ |
+| 6 Platforms | ✅ (Flutter disabled) |
 | 3 Brands | ✅ |
 | ~970 Files | ✅ |
 | Figma Scopes | ✅ |
+| var() Aliases | ✅ |
+| Responsive CSS | ✅ |

package/dist/android/brands/advertorial/components/.DSDocsStyles/.dsdocsstyles-sizeclass-compact.xml

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Do not edit directly, this file was auto-generated.
+  
+  BILD Design System Tokens v1.0.60
+  Generated by Style Dictionary v4.0.0
+  
+  Brand: Advertorial | Context: Breakpoint: sm
+  
+  Copyright (c) 2024 Axel Springer Deutschland GmbH
+  Proprietary and confidential. All rights reserved.
+  
+  Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+-->
+<resources>
+    <!-- ============================================
+         OTHER
+         ============================================ -->
+
+    <style name="TextAppearance.Advertorial.PageHeaderDescription">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+    <style name="TextAppearance.Advertorial.CodeSnippets">
+        <item name="android:fontFamily">Source Code Pro</item>
+        <item name="android:textSize">10sp</item>
+        <item name="android:lineHeight">13sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.BildDesignSideMenu">
+        <item name="android:fontFamily">Gotham XNarrow</item>
+    </style>
+    <style name="TextAppearance.Advertorial.BildDesignSideMenuActive">
+        <item name="android:fontFamily">Gotham XNarrow</item>
+    </style>
+    <style name="TextAppearance.Advertorial.BildDesignSideMenuHover">
+        <item name="android:fontFamily">Gotham XNarrow</item>
+    </style>
+    <style name="TextAppearance.Advertorial.VerticalVideosMockHeadlines">
+        <item name="android:fontFamily">Gotham Condensed</item>
+        <item name="android:textSize">22sp</item>
+        <item name="android:lineHeight">22sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.TokenSpecL">
+        <item name="android:fontFamily">Source Code Pro</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsXs">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsS">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsMs">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsM">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsMl">
+        <item name="android:fontFamily">Gotham</item>
+        <item name="android:textSize">64sp</item>
+        <item name="android:lineHeight">80sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsL">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsXl">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsXxl">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+</resources>

package/dist/android/brands/advertorial/components/.DSDocsStyles/.dsdocsstyles-sizeclass-regular.xml

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Do not edit directly, this file was auto-generated.
+  
+  BILD Design System Tokens v1.0.60
+  Generated by Style Dictionary v4.0.0
+  
+  Brand: Advertorial | Context: Breakpoint: lg
+  
+  Copyright (c) 2024 Axel Springer Deutschland GmbH
+  Proprietary and confidential. All rights reserved.
+  
+  Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+-->
+<resources>
+    <!-- ============================================
+         OTHER
+         ============================================ -->
+
+    <style name="TextAppearance.Advertorial.PageHeaderDescription">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+    <style name="TextAppearance.Advertorial.CodeSnippets">
+        <item name="android:fontFamily">Source Code Pro</item>
+        <item name="android:textSize">13sp</item>
+        <item name="android:lineHeight">16.9sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.BildDesignSideMenu">
+        <item name="android:fontFamily">Gotham XNarrow</item>
+    </style>
+    <style name="TextAppearance.Advertorial.BildDesignSideMenuActive">
+        <item name="android:fontFamily">Gotham XNarrow</item>
+    </style>
+    <style name="TextAppearance.Advertorial.BildDesignSideMenuHover">
+        <item name="android:fontFamily">Gotham XNarrow</item>
+    </style>
+    <style name="TextAppearance.Advertorial.VerticalVideosMockHeadlines">
+        <item name="android:fontFamily">Gotham Condensed</item>
+        <item name="android:textSize">32sp</item>
+        <item name="android:lineHeight">32sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.TokenSpecL">
+        <item name="android:fontFamily">Source Code Pro</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsXs">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsS">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsMs">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsM">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsMl">
+        <item name="android:fontFamily">Gotham</item>
+        <item name="android:textSize">64sp</item>
+        <item name="android:lineHeight">80sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsL">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsXl">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+    <style name="TextAppearance.Advertorial.Specs.SpecsXxl">
+        <item name="android:fontFamily">Gotham</item>
+    </style>
+</resources>

package/dist/android/brands/advertorial/components/Accordion/accordion-sizeclass-compact.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Do not edit directly, this file was auto-generated.
+  
+  BILD Design System Tokens v1.0.60
+  Generated by Style Dictionary v4.0.0
+  
+  Brand: Advertorial | Context: Breakpoint: sm
+  
+  Copyright (c) 2024 Axel Springer Deutschland GmbH
+  Proprietary and confidential. All rights reserved.
+  
+  Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+-->
+<resources>
+    <!-- ============================================
+         OTHER
+         ============================================ -->
+
+    <style name="TextAppearance.Advertorial.AccordionLabel">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">17sp</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+</resources>

package/dist/android/brands/advertorial/components/Accordion/accordion-sizeclass-regular.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Do not edit directly, this file was auto-generated.
+  
+  BILD Design System Tokens v1.0.60
+  Generated by Style Dictionary v4.0.0
+  
+  Brand: Advertorial | Context: Breakpoint: lg
+  
+  Copyright (c) 2024 Axel Springer Deutschland GmbH
+  Proprietary and confidential. All rights reserved.
+  
+  Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+-->
+<resources>
+    <!-- ============================================
+         OTHER
+         ============================================ -->
+
+    <style name="TextAppearance.Advertorial.AccordionLabel">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">17sp</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+</resources>

package/dist/android/brands/advertorial/components/Alert/alert-effects-dark.xml

@@ -2,7 +2,7 @@
 <!--
   Do not edit directly, this file was auto-generated.
   
-  BILD Design System Tokens v1.0.58
+  BILD Design System Tokens v1.0.60
   Generated by Style Dictionary v4.0.0
   
   Brand: Advertorial | Context: Mode: dark
@@ -12,23 +12,31 @@
   
   Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
 
-  NOTE: Android shadows are complex and platform-specific.
-  This file provides shadow data as XML comments for reference.
-  For actual shadow implementation, use elevation or CardView.
+  NOTE: This file provides both Material Design elevation values and raw shadow data.
+  - Use elevation dimens with CardView, MaterialCardView, or android:elevation
+  - Use string-arrays for custom shadow implementations if needed
 -->
 <resources>
 
   <!-- ============================================ -->
-  <!-- OTHER -->
+  <!-- MATERIAL DESIGN ELEVATION VALUES -->
+  <!-- Use with android:elevation or CardView.cardElevation -->
   <!-- ============================================ -->
 
-  <string-array name="alertshadowdown">
+  <dimen name="alert_shadow_down_elevation">6dp</dimen>
+  <dimen name="alert_shadow_up_elevation">6dp</dimen>
+
+  <!-- ============================================ -->
+  <!-- OTHER - RAW SHADOW DATA -->
+  <!-- For custom shadow implementations -->
+  <!-- ============================================ -->
+
+  <string-array name="alert_shadow_down_data">
     <item>offsetX:0|offsetY:6|radius:10|spread:0|color:#33000000</item>
   </string-array>
 
-  <string-array name="alertshadowup">
+  <string-array name="alert_shadow_up_data">
     <item>offsetX:0|offsetY:-2|radius:10|spread:0|color:#33000000</item>
   </string-array>
 
-
 </resources>

package/dist/android/brands/advertorial/components/Alert/alert-effects-light.xml

@@ -2,7 +2,7 @@
 <!--
   Do not edit directly, this file was auto-generated.
   
-  BILD Design System Tokens v1.0.58
+  BILD Design System Tokens v1.0.60
   Generated by Style Dictionary v4.0.0
   
   Brand: Advertorial | Context: Mode: light
@@ -12,23 +12,31 @@
   
   Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
 
-  NOTE: Android shadows are complex and platform-specific.
-  This file provides shadow data as XML comments for reference.
-  For actual shadow implementation, use elevation or CardView.
+  NOTE: This file provides both Material Design elevation values and raw shadow data.
+  - Use elevation dimens with CardView, MaterialCardView, or android:elevation
+  - Use string-arrays for custom shadow implementations if needed
 -->
 <resources>
 
   <!-- ============================================ -->
-  <!-- OTHER -->
+  <!-- MATERIAL DESIGN ELEVATION VALUES -->
+  <!-- Use with android:elevation or CardView.cardElevation -->
   <!-- ============================================ -->
 
-  <string-array name="alertshadowdown">
+  <dimen name="alert_shadow_down_elevation">6dp</dimen>
+  <dimen name="alert_shadow_up_elevation">6dp</dimen>
+
+  <!-- ============================================ -->
+  <!-- OTHER - RAW SHADOW DATA -->
+  <!-- For custom shadow implementations -->
+  <!-- ============================================ -->
+
+  <string-array name="alert_shadow_down_data">
     <item>offsetX:0|offsetY:6|radius:10|spread:0|color:#33000000</item>
   </string-array>
 
-  <string-array name="alertshadowup">
+  <string-array name="alert_shadow_up_data">
     <item>offsetX:0|offsetY:-2|radius:10|spread:0|color:#33000000</item>
   </string-array>
 
-
 </resources>

package/dist/android/brands/advertorial/components/Article/article-sizeclass-compact.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Do not edit directly, this file was auto-generated.
+  
+  BILD Design System Tokens v1.0.60
+  Generated by Style Dictionary v4.0.0
+  
+  Brand: Advertorial | Context: Breakpoint: sm
+  
+  Copyright (c) 2024 Axel Springer Deutschland GmbH
+  Proprietary and confidential. All rights reserved.
+  
+  Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+-->
+<resources>
+    <!-- ============================================
+         OTHER
+         ============================================ -->
+
+    <style name="TextAppearance.Advertorial.ArticleKicker">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">16sp</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:lineHeight">17.6sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.ArticleImageCaption">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">13sp</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:lineHeight">19.5sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.ArticleHeadline">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">30sp</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:lineHeight">30sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.ArticleMetaSource">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">13sp</item>
+        <item name="android:lineHeight">19sp</item>
+    </style>
+    <style name="TextAppearance.Advertorial.ArticleTimeStamp">
+        <item name="android:fontFamily">Lucida Grande</item>
+        <item name="android:textSize">12sp</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+</resources>