Card Theming

Card theming provides utilities to customize the appearance and content of cards based on organization preferences.

Overview

The card theming module provides three main utilities:

1. getCardThemingPrefs - Extracts and processes preferences for any card theming key
2. transformColorPrefsToStyles - Converts color preferences to CSS styles
3. getCardStylesFromConfig - Generates complete card styles from color configuration

getCardThemingPrefs

Retrieves card theming preferences from any organization preference key with fallback support.

Use this for card types that share the standard cardContent, colorFieldSelected, and colorConfigs shape.

Basic Usage

import { getCardThemingPrefs } from '@skedulo/horizon-core'

const prefs = getCardThemingPrefs({
  themingKey: 'activityCards',
})

console.log(prefs)
// {
//   cardContent: { primary: 'Name', secondary: 'Notes' },
//   colorFieldSelected: 'Default',
//   colors: { Default: { name: 'neutral', type: 'default' } }
// }

With Custom Organization Preferences

import { getCardThemingPrefs } from '@skedulo/horizon-core'

const orgPrefs = {
  web: {
    theming: {
      activityCards: {
        colorFieldSelected: 'Default',
        colorConfigs: {
          Default: { Default: { name: 'purple', type: 'light' } },
        },
      },
    },
  },
}

const prefs = getCardThemingPrefs({
  themingKey: 'activityCards',
  orgPrefs,
})

With Custom Default Preferences

You can provide custom default preferences that will be used when org preferences are not available.

import { getCardThemingPrefs } from '@skedulo/horizon-core'

const defaultOrgPrefs = {
  web: {
    theming: {
      activityCards: {
        colorFieldSelected: 'Default',
        colorConfigs: {
          Default: { Default: { name: 'teal', type: 'default' } },
        },
      },
    },
  },
}

const prefs = getCardThemingPrefs({
  themingKey: 'activityCards',
  defaultOrgPrefs,
})

Return Type

interface CardThemingPrefs {
  cardContent: {
    primary: string
    secondary: string
  }
  colorFieldSelected: string
  colors: Record<string, ColorConfig>
}

transformColorPrefsToStyles

Converts color configuration preferences into CSS style objects for card rendering.

Usage

import { transformColorPrefsToStyles } from '@skedulo/horizon-core'

const colorConfig = { name: 'cyan', type: 'default' }
const showAsPending = false

const styles = transformColorPrefsToStyles(colorConfig, showAsPending)

console.log(styles)
// {
//   color: '#ffffff',
//   borderColor: 'transparent',
//   backgroundColor: '#0891b2'
// }

Pending State

Cards can be styled in a "pending" state with a hollow appearance:

import { transformColorPrefsToStyles } from '@skedulo/horizon-core'

const colorConfig = { name: 'red', type: 'default' }
const showAsPending = true

const styles = transformColorPrefsToStyles(colorConfig, showAsPending)

console.log(styles)
// {
//   color: '#171717',
//   borderColor: '#dc2626',
//   backgroundColor: '#ffffff'
// }

Color Type Mapping

The type field maps to different color intensities:

• darker: 800 shade (or 750 for neutral)
• dark: 700 shade
• default: 600 shade (or 650 for neutral)
• light: 200 shade (with dark text)

getCardStylesFromConfig

Convenience function that combines color config lookup with style transformation.

Usage

import { getCardStylesFromConfig } from '@skedulo/horizon-core'

const colors = {
  Sick: { name: 'red', type: 'default' },
  Leave: { name: 'green', type: 'default' },
  Occupied: { name: 'purple', type: 'default' },
}

const value = 'Sick'
const showAsPending = false

const styles = getCardStylesFromConfig(colors, value, showAsPending)

console.log(styles)
// {
//   color: '#ffffff',
//   borderColor: 'transparent',
//   backgroundColor: '#dc2626'
// }

With Missing Color Configuration

If the value doesn't have a color configuration, it uses a default:

import { getCardStylesFromConfig } from '@skedulo/horizon-core'

const colors = {
  Sick: { name: 'red', type: 'default' },
}

const value = 'Unknown' // No config for this value
const styles = getCardStylesFromConfig(colors, value, false)

console.log(styles)
// Uses default cyan color:
// {
//   color: '#ffffff',
//   borderColor: 'transparent',
//   backgroundColor: '#0891b2'
// }

Complete Example

Here's a complete example showing how to use these utilities together:

import {
  getCardThemingPrefs,
  getCardStylesFromConfig,
} from '@skedulo/horizon-core'

// 1. Get the theming preferences
const prefs = getCardThemingPrefs({
  themingKey: 'unavailabilityCards',
  defaults: {
    colorConfigs: {
      Default: { Default: { name: 'cyan', type: 'default' } },
    },
  },
})

// 2. Extract the data you need
const { cardContent, colorFieldSelected, colors } = prefs

// 3. For a specific unavailability record, get the color value
const unavailability = {
  Name: 'John Doe',
  Notes: 'Vacation',
  Type: 'Leave',
}

// 4. Get the field value to use for coloring
const colorValue = unavailability[colorFieldSelected] // e.g., 'Leave'

// 5. Get the styles for this card
const isPending = false
const cardStyles = getCardStylesFromConfig(colors, colorValue, isPending)

// 6. Apply styles to your card component
// <Card
//   style={cardStyles}
//   primary={unavailability[cardContent.primary]}
//   secondary={unavailability[cardContent.secondary]}
// />

Type Definitions

All TypeScript types are exported from @skedulo/horizon-core:

import type {
  CardThemingConfig,
  CardThemingOrgPreferences,
  CardThemingPrefs,
  GetCardThemingPrefsOptions,
  UnavailabilityCardsConfig,
  ActivityCardsConfig,
  ColorConfig,
  ColorName,
  ColorType,
} from '@skedulo/horizon-core'