Skip to content

Commit

Permalink
Merge pull request #47 from Teamwork/android/xml_sizes
Browse files Browse the repository at this point in the history 
Android: Generate XML sizes and add Teamwork.*.system
  • Loading branch information
@aidangrabe
aidangrabe authored Jan 9, 2023
2 parents df1e064 + 6de119e commit 0cfc460
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 5 deletions.
3 changes: 3 additions & 0 deletions android/styledictionary/.idea/codeStyles/Project.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 33 additions & 2 deletions ...styledictionary/teamwork-design-system/src/main/java/com/teamwork/design/TeamworkTheme.kt
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -30,15 +49,27 @@ 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


/**
* A [MaterialTheme] which also provides the Teamwork Design Tokens via [TeamworkTheme.color] etc.
*/
@Composable
fun TeamworkTheme(content: @Composable () -> Unit) {
MaterialTheme.colorScheme.surface
AppTheme {
val teamworkColors = if (isSystemInDarkTheme()) {
DarkColors
Expand Down
87 changes: 87 additions & 0 deletions android/styledictionary/teamwork-design-system/src/main/res/values/dimens.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<dimen name="border_width_xs">0.5dp</dimen> <!-- type: borderWidth -->
<dimen name="border_width_sm">1dp</dimen> <!-- type: borderWidth -->
<dimen name="border_width_md">2dp</dimen> <!-- type: borderWidth -->
<dimen name="border_width_lg">3dp</dimen> <!-- type: borderWidth -->
<dimen name="border_radius_none">0dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_xxs">4dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_xs">6dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_sm">8dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_md">12dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_lg">16dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_xl">28dp</dimen> <!-- type: borderRadius -->
<dimen name="border_radius_full">100dp</dimen> <!-- type: borderRadius -->
<!-- Ignoring token of type 'fontFamilies' -->
<!-- Ignoring token of type 'fontFamilies' -->
<dimen name="line_height_leading_01">16sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_02">20sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_03">24sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_04">28sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_05">32sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_06">36sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_07">40sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_08">44sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_09">52sp</dimen> <!-- type: lineHeights -->
<dimen name="line_height_leading_10">64sp</dimen> <!-- type: lineHeights -->
<!-- Ignoring token of type 'fontWeights' -->
<!-- Ignoring token of type 'fontWeights' -->
<dimen name="fonts_size_font_size_01">11sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_02">12sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_03">14sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_04">16sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_05">22sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_06">24sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_07">28sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_08">32sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_09">36sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_10">45sp</dimen> <!-- type: fontSizes -->
<dimen name="fonts_size_font_size_11">57sp</dimen> <!-- type: fontSizes -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'letterSpacing' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'typography' -->
<!-- Ignoring token of type 'textCase' -->
<!-- Ignoring token of type 'boxShadow' -->
<!-- Ignoring token of type 'boxShadow' -->
<!-- Ignoring token of type 'boxShadow' -->
<!-- Ignoring token of type 'boxShadow' -->
<!-- Ignoring token of type 'boxShadow' -->
<!-- Ignoring token of type 'textDecoration' -->
<dimen name="space_space_01">2dp</dimen> <!-- type: spacing -->
<dimen name="space_space_02">4dp</dimen> <!-- type: spacing -->
<dimen name="space_space_03">8dp</dimen> <!-- type: spacing -->
<dimen name="space_space_04">12dp</dimen> <!-- type: spacing -->
<dimen name="space_space_05">16dp</dimen> <!-- type: spacing -->
<dimen name="space_space_06">24dp</dimen> <!-- type: spacing -->
<dimen name="space_space_07">32dp</dimen> <!-- type: spacing -->
<dimen name="space_space_08">40dp</dimen> <!-- type: spacing -->
<dimen name="space_space_09">44dp</dimen> <!-- type: spacing -->
<dimen name="space_space_10">48dp</dimen> <!-- type: spacing -->
<dimen name="space_space_11">56dp</dimen> <!-- type: spacing -->
<dimen name="space_space_12">64dp</dimen> <!-- type: spacing -->
<dimen name="space_space_13">72dp</dimen> <!-- type: spacing -->
<dimen name="space_space_14">80dp</dimen> <!-- type: spacing -->
<dimen name="space_space_15">112dp</dimen> <!-- type: spacing -->
<dimen name="space_space_16">128dp</dimen> <!-- type: spacing -->
<dimen name="space_space_none">0dp</dimen> <!-- type: spacing -->
</resources>
6 changes: 3 additions & 3 deletions build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -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`
}]
}
}
Expand Down
36 changes: 36 additions & 0 deletions formats/androidSize.js
View file
Original file line number Diff line number Diff line change
@@ -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 `<?xml version="1.0" encoding="UTF-8"?>
<resources>
${generateDimens(dictionary.allProperties)}
</resources>
`;
}

function generateDimens(tokens) {
return "\t" + tokens.map(token => generateDimenForToken(token)).join("\n\t");
}

/**
* Generates a `<dimen name="{name}">{value}</dimen>` 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 `<!-- Ignoring token of type '${token.type}' -->`;
console.log(`token: ${JSON.stringify(token, null, 4)}`);
return `<dimen name="${token.name}">${token.value}${validSizeTokenTypes[token.type].unit}</dimen> <!-- type: ${token.type} -->`
}

0 comments on commit 0cfc460

Please sign in to comment.