From a300bdcf53e317c30e4798a9437fe569a616227e Mon Sep 17 00:00:00 2001 From: Aidan Grabe Date: Wed, 4 Jan 2023 13:48:05 +0000 Subject: [PATCH 1/3] Generate dimens.xml for the sizes --- .../src/main/res/values/dimens.xml | 87 +++++++++++++++++++ build.js | 6 +- formats/androidSize.js | 36 ++++++++ 3 files changed, 126 insertions(+), 3 deletions(-) create mode 100644 android/styledictionary/teamwork-design-system/src/main/res/values/dimens.xml create mode 100644 formats/androidSize.js diff --git a/android/styledictionary/teamwork-design-system/src/main/res/values/dimens.xml b/android/styledictionary/teamwork-design-system/src/main/res/values/dimens.xml new file mode 100644 index 0000000..2c91b5b --- /dev/null +++ b/android/styledictionary/teamwork-design-system/src/main/res/values/dimens.xml @@ -0,0 +1,87 @@ + + + 0.5dp + 1dp + 2dp + 3dp + 0dp + 4dp + 6dp + 8dp + 12dp + 16dp + 28dp + 100dp + + + 16sp + 20sp + 24sp + 28sp + 32sp + 36sp + 40sp + 44sp + 52sp + 64sp + + + 11sp + 12sp + 14sp + 16sp + 22sp + 24sp + 28sp + 32sp + 36sp + 45sp + 57sp + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2dp + 4dp + 8dp + 12dp + 16dp + 24dp + 32dp + 40dp + 44dp + 48dp + 56dp + 64dp + 72dp + 80dp + 112dp + 128dp + 0dp + diff --git a/build.js b/build.js index 004b5b8..0bcd7a1 100644 --- a/build.js +++ b/build.js @@ -42,6 +42,7 @@ const composeColorsClassName = "TeamworkColors"; swiftSize: require('./formats/swiftSize'), //android androidColor: require('./formats/androidColor'), + androidSize: require('./formats/androidSize'), androidTypography: require('./formats/androidTypography'), composeColor: require('./formats/composeColor'), composeColorPalette: require('./formats/composeColorPalette'), @@ -186,9 +187,8 @@ const composeColorsClassName = "TeamworkColors"; format: `androidTypography` },{ destination: `values/dimens.xml`, - filter: (token) => token.type === `size` && - token.type !== `custom-fontStyle`, - format: `android/resources` + filter: (token) => token.type !== `color`, + format: `androidSize` }] } } diff --git a/formats/androidSize.js b/formats/androidSize.js new file mode 100644 index 0000000..b89d176 --- /dev/null +++ b/formats/androidSize.js @@ -0,0 +1,36 @@ +// the list of token types we accept to generate a size dimen for. Tokens of type that are not in this +// list will not be generated. +const validSizeTokenTypes = { + 'borderWidth': { "unit": "dp" }, + 'borderRadius': { "unit": "dp" }, + 'lineHeights': { "unit": "sp" }, + 'fontSizes': { "unit": "sp" }, + 'spacing': { "unit": "dp" } +}; + +/** + * Generate some sizes from the Design System such as border_radius, spacing etc. + */ +module.exports = function ({ dictionary, options }) { + return ` + +${generateDimens(dictionary.allProperties)} + +`; +} + +function generateDimens(tokens) { + return "\t" + tokens.map(token => generateDimenForToken(token)).join("\n\t"); +} + +/** + * Generates a `{value}` for the given {@link token}. Outputs a comment for any token type + * not in {@link validSizeTokenTypes}. + */ +function generateDimenForToken(token) { + const validTypes = Object.keys(validSizeTokenTypes); + + if (!validTypes.includes(token.type)) return ``; + console.log(`token: ${JSON.stringify(token, null, 4)}`); + return `${token.value}${validSizeTokenTypes[token.type].unit} ` +} From d0244c94b4e69e1e4f8d99ae17c112c3ba16fa9a Mon Sep 17 00:00:00 2001 From: Aidan Grabe Date: Mon, 9 Jan 2023 14:34:28 +0000 Subject: [PATCH 2/3] TeamworkTheme: Add `system` aliases --- .../java/com/teamwork/design/TeamworkTheme.kt | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/android/styledictionary/teamwork-design-system/src/main/java/com/teamwork/design/TeamworkTheme.kt b/android/styledictionary/teamwork-design-system/src/main/java/com/teamwork/design/TeamworkTheme.kt index 1e48219..8c5cb09 100644 --- a/android/styledictionary/teamwork-design-system/src/main/java/com/teamwork/design/TeamworkTheme.kt +++ b/android/styledictionary/teamwork-design-system/src/main/java/com/teamwork/design/TeamworkTheme.kt @@ -1,22 +1,41 @@ +@file:Suppress("unused") + package com.teamwork.design import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.ColorScheme import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Shapes import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.compositionLocalOf +import com.teamwork.design.TeamworkTheme.shapes import com.teamwork.design.generated.* import com.teamwork.design.m3.AppTheme +// defaults to showing the Light colours +private val LocalTeamworkColors = compositionLocalOf { LightColors } + /** * Provides Composition local references to the colours, fonts etc. + * For convenience there are extension properties [TeamworkColors.system] and [TeamworkTypography.system] to allow easy access to the + * tokens defined by [MaterialTheme]. [shapes] also is an alias to [MaterialTheme.shapes] since we don't define any of our own shape + * tokens. This way we should be able to use [TeamworkTheme] for all tokens. */ +@Suppress("MemberVisibilityCanBePrivate") object TeamworkTheme { val color @Composable + @ReadOnlyComposable get() = LocalTeamworkColors.current + val shapes: Shapes + @Composable + @ReadOnlyComposable + get() = MaterialTheme.shapes + val typography = TeamworkTypography val borderRadius = BorderRadius @@ -30,8 +49,19 @@ object TeamworkTheme { } -// defaults to showing the Light colours -private val LocalTeamworkColors = compositionLocalOf { LightColors } +//region extension functions to alias the MaterialTheme into our TeamworkTheme + +val TeamworkColors.system: ColorScheme + @Composable + @ReadOnlyComposable + get() = MaterialTheme.colorScheme + +val TeamworkTypography.system: androidx.compose.material3.Typography + @Composable + @ReadOnlyComposable + get() = MaterialTheme.typography + +//endregion /** @@ -39,6 +69,7 @@ private val LocalTeamworkColors = compositionLocalOf { LightColors } */ @Composable fun TeamworkTheme(content: @Composable () -> Unit) { + MaterialTheme.colorScheme.surface AppTheme { val teamworkColors = if (isSystemInDarkTheme()) { DarkColors From 6de119ec5ee4dabe22312e7642f57ed8cf24f358 Mon Sep 17 00:00:00 2001 From: Aidan Grabe Date: Mon, 9 Jan 2023 14:40:44 +0000 Subject: [PATCH 3/3] Android: Update codestyle to wrap at 140 chars --- android/styledictionary/.idea/codeStyles/Project.xml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/android/styledictionary/.idea/codeStyles/Project.xml b/android/styledictionary/.idea/codeStyles/Project.xml index 7643783..b13e2bb 100644 --- a/android/styledictionary/.idea/codeStyles/Project.xml +++ b/android/styledictionary/.idea/codeStyles/Project.xml @@ -3,6 +3,9 @@ + +