kvadrant-core/io.github.youndie.kvadrant.theme

Package-level declarations

Types

The twenty accents Windows Phone 8 shipped.

data class KvadrantColors(val accent: Color, val foreground: Color, val background: Color, val contrastForeground: Color, val contrastBackground: Color, val disabled: Color, val subtle: Color, val chrome: Color, val semitransparent: Color, val border: Color, val inactive: Color, val textBox: Color, val textBoxEditBackground: Color, val textBoxForeground: Color, val checkBoxPressed: Color, val checkBoxPressedBorder: Color, val isDark: Boolean)

The Windows Phone theme palette: thirteen tokens and one accent, transcribed from the SDK's ThemeResources.xaml.

KvadrantEasing

object KvadrantEasing

Metro's timing, from the WinJS animation library and the Windows Phone Toolkit.

KvadrantFontSizes

object KvadrantFontSizes

Windows Phone sized text in points. Metro's own resource dictionary annotates every size with its point value, and the ratio is 0.75 in all seventeen of them, so this is Microsoft's conversion rather than a convention chosen here.

KvadrantMetrics

@Immutable

data class KvadrantMetrics(val scale: Float = 1.0f, val margin: Dp = 9.dp, val borderThickness: Dp = 2.25.dp, val focusRingThickness: Dp = 1.667.dp, val touchTargetOverhang: Dp = 9.dp, val touchTargetVisual: Dp = 25.5.dp, val touchTargetMin: Dp = 48.dp, val pivotItemMargin: Dp = 9.dp, val pivotItemTopMargin: Dp = 21.dp, val pivotHeaderGap: Dp = 15.75.dp, val tiltDepression: Dp = 18.75.dp, val buttonPaddingHorizontal: Dp = 7.5.dp, val buttonPaddingTop: Dp = 2.25.dp, val buttonPaddingBottom: Dp = 3.75.dp, val progressThickness: Dp = 3.dp, val sliderThickness: Dp = 9.dp, val tileSmall: Dp = 74.25.dp, val tileMedium: Dp = 157.5.dp, val tileWide: Dp = 324.dp, val tileGap: Dp = 9.dp)

Page and control measurements, in dp at the canonical 0.75 of Metro's pixels.

KvadrantTheme

object KvadrantTheme

The current theme.

KvadrantTypography

@Immutable

data class KvadrantTypography(val normal: TextStyle, val subtle: TextStyle, val title: TextStyle, val mediumLarge: TextStyle, val large: TextStyle, val extraLarge: TextStyle, val pageTitle: TextStyle, val pivotHeader: TextStyle, val panoramaTitle: TextStyle, val panoramaSectionHeader: TextStyle)

The named text styles of a Windows Phone page.

KvadrantWeights

object KvadrantWeights

Metro chooses weight by picking a family, not by setting a number. Selawik ships exactly the five Segoe WP had, and these are the four the phone's own styles use.

Properties

LocalKvadrantTextStyle

val LocalKvadrantTextStyle: ProvidableCompositionLocal<TextStyle>

The style io.github.youndie.kvadrant.foundation.KvadrantText uses when given none.

WCAG_AA

const val WCAG_AA: Float = 4.5f

WCAG AA for body text.

Functions

accessible

fun KvadrantColors.accessible(target: Float = WCAG_AA): KvadrantColors

The theme with every colour that carries text raised to WCAG AA.

accessibleAccent

fun accessibleAccent(accent: Color, target: Float = WCAG_AA): Color

The nearest colour to accent that reaches target against the text colour Metro would put on it, found by walking towards black or white.

contrastOn

fun contrastOn(background: Color): Color

Which of black or white to put on a colour, by the rule Windows Phone used: light accents take black text, dark ones take white.

contrastRatio

fun contrastRatio(a: Color, b: Color): Float

WCAG's contrast ratio between two opaque colours.

KvadrantTheme

@Composable

fun KvadrantTheme(colors: KvadrantColors = KvadrantColors.dark(), typography: KvadrantTypography = LocalKvadrantTypography.current, metrics: KvadrantMetrics = KvadrantMetrics(), remastered: Boolean = false, content: @Composable () -> Unit)

Wraps content in a Metro theme, and replaces the press indication with TiltIndication — the plane leaning towards the finger is Metro's ripple, and it is the default rather than something a caller remembers to apply.

scaled

fun KvadrantMetrics.scaled(factor: Float): KvadrantMetrics

The same measurements, every one of them multiplied by factor.

fun KvadrantTypography.scaled(factor: Float): KvadrantTypography

The same ramp, every size multiplied by factor.

scaledToWidth

fun KvadrantMetrics.scaledToWidth(width: Dp): KvadrantMetrics

The metric set scaled so that one row of the Start screen — margin, wide tile, margin — is exactly width across.