orange-opensource/ouds-ios/ouds-ios-guide-create-theme

OUDSTheme                    ← base "abstract" class (open)
    │
    └── OrangeTheme          ← open, the ONLY publicly subclassable theme
            │
            └── YourTheme    ← your app's custom theme (Strategy A)
 
OUDSTheme
    └── YourTheme            ← from-scratch theme (Strategy B)

import OUDSThemesOrange
// or the umbrella product that includes it:
import OUDSSwiftUIOrange

import OUDSTokensRaw
 
// Colors
class YourThemeColorProvider: OrangeThemeColorSemanticTokensProvider {
    override var bgSecondary: MultipleColorSemanticToken {
        MultipleColorSemanticToken(
            light: ColorRawTokens.colorDecorativeAmber500,
            dark:  OrangeBrandColorRawTokens.colorOrange900)
    }
    override var actionEnabled: MultipleColorSemanticToken {
        MultipleColorSemanticToken(
            light: ColorRawTokens.colorDecorativeShockingPink100,
            dark:  ColorRawTokens.functionalScarlet600)
    }
}
 
// Borders
class YourThemeBorderProvider: OrangeThemeBorderSemanticTokensProvider {
    override var styleDefault: BorderStyleSemanticToken { BorderRawTokens.styleDashed }
    override var radiusLarge:  BorderRadiusSemanticToken { BorderRawTokens.radius800 }
}
 
// Elevations
class YourThemeElevationProvider: OrangeThemeElevationSemanticTokensProvider {
    override var stickyEmphasized: ElevationCompositeSemanticToken {
        ElevationCompositeSemanticToken(ElevationRawTokens.bottom_4_600)
    }
}
 
// Opacities
class YourThemeOpacityProvider: OrangeThemeOpacitySemanticTokensProvider {
    override var strong: OpacitySemanticToken { OpacityRawTokens._920 }
}
 
// Spaces
class YourThemeSpaceProvider: OrangeThemeSpaceSemanticTokensProvider {
    override var fixedMedium: SpaceSemanticToken { DimensionRawTokens._400 }
    override var scaledSmall: MultipleSpaceSemanticToken {
        MultipleSpaceSemanticToken(compact: fixed5xl, regular: fixed5xl)
    }
}
 
// Sizes
class YourThemeSizeProvider: OrangeThemeSizeSemanticTokensProvider {
    override var iconDecorative2xl: SizeSemanticToken { DimensionRawTokens._300 }
}
 
// Grids
class YourThemeGridProvider: OrangeThemeGridSemanticTokensProvider {
    override var extraCompactColumnGap: GridSemanticToken { GridRawTokens.columnGap200 }
    override var compactColumnGap:      GridSemanticToken { GridRawTokens.columnGap200 }
    override var regularColumnGap:      GridSemanticToken { GridRawTokens.columnGap200 }
}
 
// Font (typography scale)
class YourThemeFontProvider: OrangeThemeFontSemanticTokensProvider {
    override var displayLarge: MultipleFontCompositeSemanticToken {
        MultipleFontCompositeSemanticToken(FontCompositeSemanticToken(
            size:          sizeDisplayLargeMobile,
            lineHeight:    lineHeightDisplayLargeMobile,
            weight:        weightDisplay,
            letterSpacing: letterSpacingDisplayLargeMobile))
    }
}

import OUDSThemesContract
import OUDSTokensRaw
 
class YourTheme: OUDSTheme {
 
    static let name = "YourBrand"
 
    override init() {
        // Only instantiate providers you need to override.
        // All other parameters default to the Orange equivalents.
        let colors  = YourThemeColorProvider()
        let borders = YourThemeBorderProvider()
        let fonts   = YourThemeFontProvider()
        // … add only the providers you override …
 
        super.init(
            colors:  colors,
            borders: borders,
            fonts:   fonts,
            // Leave unspecified parameters as nil → Orange defaults are used if OrangeTheme used as super class.
            name:    Self.name,
            tuning:  Tuning.default)  // see §5 for tuning options
        )
    }
}

import OUDSThemesContract   // OUDSTheme base + AllXxx protocols
import SwiftUI
import CoreText              // only if registering custom fonts

1. borders, colors, effects, elevations, fonts, grids, opacities
2. dimensions                              ← standalone
3. colorModes(colors:)                     ← depends on colors
4. sizes(dimensions:), spaces(dimensions:) ← depend on dimensions
5. All component providers                 ← depend on the semantic providers above