diff --git a/__integration__/__snapshots__/compose.test.js.snap b/__integration__/__snapshots__/compose.test.js.snap new file mode 100644 index 000000000..eb7f42de0 --- /dev/null +++ b/__integration__/__snapshots__/compose.test.js.snap @@ -0,0 +1,363 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`integration compose compose/object should match snapshot 1`] = ` +" + +// Do not edit directly +// Generated on Sat, 01 Jan 2000 00:00:00 GMT + + + +package com.example.tokens; + + +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.* + +object StyleDictionary { + val colorBackgroundDanger = Color(0xffffeae9) + val colorBackgroundDisabled = Color(0xffdee1e1) + val colorBackgroundInfo = Color(0xffe9f8ff) + val colorBackgroundPrimary = Color(0xffffffff) + val colorBackgroundSecondary = Color(0xfff3f4f4) + val colorBackgroundSuccess = Color(0xffebf9eb) + val colorBackgroundTertiary = Color(0xffdee1e1) + val colorBackgroundWarning = Color(0xffffede3) + val colorBorderPrimary = Color(0xffc8cccc) + val colorBrandPrimary = Color(0xff0b8599) + val colorBrandSecondary = Color(0xff6f5ed3) + val colorCoreAqua0 = Color(0xffd9fcfb) + val colorCoreAqua100 = Color(0xffc5f9f9) + val colorCoreAqua1000 = Color(0xff083d4f) + val colorCoreAqua1100 = Color(0xff002838) + val colorCoreAqua200 = Color(0xffa5f2f2) + val colorCoreAqua300 = Color(0xff76e5e2) + val colorCoreAqua400 = Color(0xff33d6e2) + val colorCoreAqua500 = Color(0xff17b8ce) + val colorCoreAqua600 = Color(0xff0797ae) + val colorCoreAqua700 = Color(0xff0b8599) + val colorCoreAqua800 = Color(0xff0f6e84) + val colorCoreAqua900 = Color(0xff035e73) + val colorCoreBlue0 = Color(0xffe9f8ff) + val colorCoreBlue100 = Color(0xffdcf2ff) + val colorCoreBlue1000 = Color(0xff0a3960) + val colorCoreBlue1100 = Color(0xff002138) + val colorCoreBlue200 = Color(0xffc7e4f9) + val colorCoreBlue300 = Color(0xffa1d2f8) + val colorCoreBlue400 = Color(0xff56adf5) + val colorCoreBlue500 = Color(0xff3896e3) + val colorCoreBlue600 = Color(0xff2b87d3) + val colorCoreBlue700 = Color(0xff2079c3) + val colorCoreBlue800 = Color(0xff116daa) + val colorCoreBlue900 = Color(0xff0c5689) + val colorCoreGreen0 = Color(0xffebf9eb) + val colorCoreGreen100 = Color(0xffd7f4d7) + val colorCoreGreen1000 = Color(0xff08422f) + val colorCoreGreen1100 = Color(0xff002b20) + val colorCoreGreen200 = Color(0xffc2f2bd) + val colorCoreGreen300 = Color(0xff98e58e) + val colorCoreGreen400 = Color(0xff75dd66) + val colorCoreGreen500 = Color(0xff59cb59) + val colorCoreGreen600 = Color(0xff2bb656) + val colorCoreGreen700 = Color(0xff0ca750) + val colorCoreGreen800 = Color(0xff008b46) + val colorCoreGreen900 = Color(0xff006b40) + val colorCoreMagenta0 = Color(0xfffef0ff) + val colorCoreMagenta100 = Color(0xfff9e3fc) + val colorCoreMagenta1000 = Color(0xff451551) + val colorCoreMagenta1100 = Color(0xff29192d) + val colorCoreMagenta200 = Color(0xfff4c4f7) + val colorCoreMagenta300 = Color(0xffedadf2) + val colorCoreMagenta400 = Color(0xfff282f5) + val colorCoreMagenta500 = Color(0xffdb61db) + val colorCoreMagenta600 = Color(0xffc44eb9) + val colorCoreMagenta700 = Color(0xffac44a8) + val colorCoreMagenta800 = Color(0xff8f3896) + val colorCoreMagenta900 = Color(0xff6c2277) + val colorCoreNeutral0 = Color(0xffffffff) + val colorCoreNeutral100 = Color(0xfff3f4f4) + val colorCoreNeutral1000 = Color(0xff162020) + val colorCoreNeutral1100 = Color(0xff040404) + val colorCoreNeutral200 = Color(0xffdee1e1) + val colorCoreNeutral300 = Color(0xffc8cccc) + val colorCoreNeutral400 = Color(0xffb0b6b7) + val colorCoreNeutral500 = Color(0xff929a9b) + val colorCoreNeutral600 = Color(0xff6e797a) + val colorCoreNeutral700 = Color(0xff515e5f) + val colorCoreNeutral800 = Color(0xff364141) + val colorCoreNeutral900 = Color(0xff273333) + val colorCoreOrange0 = Color(0xffffede3) + val colorCoreOrange100 = Color(0xfffcdccc) + val colorCoreOrange1000 = Color(0xff601700) + val colorCoreOrange1100 = Color(0xff2d130e) + val colorCoreOrange200 = Color(0xffffc6a4) + val colorCoreOrange300 = Color(0xffffb180) + val colorCoreOrange400 = Color(0xffff9c5d) + val colorCoreOrange500 = Color(0xfffc8943) + val colorCoreOrange600 = Color(0xfff57d33) + val colorCoreOrange700 = Color(0xffed7024) + val colorCoreOrange800 = Color(0xffce5511) + val colorCoreOrange900 = Color(0xff962c0b) + val colorCorePink0 = Color(0xffffe9f3) + val colorCorePink100 = Color(0xfffcdbeb) + val colorCorePink1000 = Color(0xff561231) + val colorCorePink1100 = Color(0xff2b1721) + val colorCorePink200 = Color(0xffffb5d5) + val colorCorePink300 = Color(0xffff95c1) + val colorCorePink400 = Color(0xffff76ae) + val colorCorePink500 = Color(0xffef588b) + val colorCorePink600 = Color(0xffe0447c) + val colorCorePink700 = Color(0xffce3665) + val colorCorePink800 = Color(0xffb22f5b) + val colorCorePink900 = Color(0xff931847) + val colorCorePurple0 = Color(0xfff2f2f9) + val colorCorePurple100 = Color(0xffeaeaf9) + val colorCorePurple1000 = Color(0xff2d246b) + val colorCorePurple1100 = Color(0xff1d1d38) + val colorCorePurple200 = Color(0xffd8d7f9) + val colorCorePurple300 = Color(0xffc1c1f7) + val colorCorePurple400 = Color(0xffa193f2) + val colorCorePurple500 = Color(0xff9180f4) + val colorCorePurple600 = Color(0xff816fea) + val colorCorePurple700 = Color(0xff6f5ed3) + val colorCorePurple800 = Color(0xff5e4eba) + val colorCorePurple900 = Color(0xff483a9c) + val colorCoreRed0 = Color(0xffffeae9) + val colorCoreRed100 = Color(0xffffd5d2) + val colorCoreRed1000 = Color(0xff6d1313) + val colorCoreRed1100 = Color(0xff2b1111) + val colorCoreRed200 = Color(0xffffb8b1) + val colorCoreRed300 = Color(0xffff9c8f) + val colorCoreRed400 = Color(0xffff7f6e) + val colorCoreRed500 = Color(0xfff76054) + val colorCoreRed600 = Color(0xffed4c42) + val colorCoreRed700 = Color(0xffdb3e3e) + val colorCoreRed800 = Color(0xffc63434) + val colorCoreRed900 = Color(0xff992222) + val colorCoreTeal0 = Color(0xffe5f9f5) + val colorCoreTeal100 = Color(0xffcdf7ef) + val colorCoreTeal1000 = Color(0xff083f3f) + val colorCoreTeal1100 = Color(0xff002528) + val colorCoreTeal200 = Color(0xffb3f2e6) + val colorCoreTeal300 = Color(0xff7dead5) + val colorCoreTeal400 = Color(0xff24e0c5) + val colorCoreTeal500 = Color(0xff08c4b2) + val colorCoreTeal600 = Color(0xff00a99c) + val colorCoreTeal700 = Color(0xff0b968f) + val colorCoreTeal800 = Color(0xff067c7c) + val colorCoreTeal900 = Color(0xff026661) + val colorCoreYellow0 = Color(0xfffff8e2) + val colorCoreYellow100 = Color(0xfffdefcd) + val colorCoreYellow1000 = Color(0xff542a00) + val colorCoreYellow1100 = Color(0xff2d1a05) + val colorCoreYellow200 = Color(0xffffe99a) + val colorCoreYellow300 = Color(0xffffe16e) + val colorCoreYellow400 = Color(0xffffd943) + val colorCoreYellow500 = Color(0xffffcd1c) + val colorCoreYellow600 = Color(0xffffbc00) + val colorCoreYellow700 = Color(0xffdd9903) + val colorCoreYellow800 = Color(0xffba7506) + val colorCoreYellow900 = Color(0xff944c0c) + val colorFontDanger = Color(0xff6d1313) + val colorFontInteractive = Color(0xff0b8599) + val colorFontInteractiveActive = Color(0xff6f5ed3) + val colorFontInteractiveDisabled = Color(0xff364141) + val colorFontInteractiveHover = Color(0xff0b8599) + val colorFontPrimary = Color(0xff040404) + val colorFontSecondary = Color(0xff273333) + val colorFontSuccess = Color(0xff08422f) + val colorFontTertiary = Color(0xff364141) + val colorFontWarning = Color(0xff601700) + val sizeBorderRadiusLarge = 480.00.dp + val sizeFontLarge = 24.00.sp + val sizeFontMedium = 16.00.sp + val sizeFontSmall = 12.00.sp + val sizeFontXl = 36.00.sp + val sizePaddingLarge = 16.00.dp + val sizePaddingMedium = 16.00.dp + val sizePaddingSmall = 8.00.dp + val sizePaddingXl = 16.00.dp +} +" +`; + +exports[`integration compose compose/object with references should match snapshot 1`] = ` +" + +// Do not edit directly +// Generated on Sat, 01 Jan 2000 00:00:00 GMT + + + +package com.example.tokens; + + +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.* + +object StyleDictionary { + val sizePaddingXl = 16.00.dp + val sizePaddingLarge = 16.00.dp + val sizePaddingMedium = 16.00.dp + val sizePaddingSmall = 8.00.dp + val sizeFontXl = 36.00.sp + val sizeFontLarge = 24.00.sp + val sizeFontMedium = 16.00.sp + val sizeFontSmall = 12.00.sp + val sizeBorderRadiusLarge = 480.00.dp + val colorCoreYellow1100 = Color(0xff2d1a05) + val colorCoreYellow1000 = Color(0xff542a00) + val colorCoreYellow900 = Color(0xff944c0c) + val colorCoreYellow800 = Color(0xffba7506) + val colorCoreYellow700 = Color(0xffdd9903) + val colorCoreYellow600 = Color(0xffffbc00) + val colorCoreYellow500 = Color(0xffffcd1c) + val colorCoreYellow400 = Color(0xffffd943) + val colorCoreYellow300 = Color(0xffffe16e) + val colorCoreYellow200 = Color(0xffffe99a) + val colorCoreYellow100 = Color(0xfffdefcd) + val colorCoreYellow0 = Color(0xfffff8e2) + val colorCoreNeutral1100 = Color(0xff040404) + val colorCoreNeutral1000 = Color(0xff162020) + val colorCoreNeutral900 = Color(0xff273333) + val colorCoreNeutral800 = Color(0xff364141) + val colorCoreNeutral700 = Color(0xff515e5f) + val colorCoreNeutral600 = Color(0xff6e797a) + val colorCoreNeutral500 = Color(0xff929a9b) + val colorCoreNeutral400 = Color(0xffb0b6b7) + val colorCoreNeutral300 = Color(0xffc8cccc) + val colorCoreNeutral200 = Color(0xffdee1e1) + val colorCoreNeutral100 = Color(0xfff3f4f4) + val colorCoreNeutral0 = Color(0xffffffff) + val colorCoreOrange1100 = Color(0xff2d130e) + val colorCoreOrange1000 = Color(0xff601700) + val colorCoreOrange900 = Color(0xff962c0b) + val colorCoreOrange800 = Color(0xffce5511) + val colorCoreOrange700 = Color(0xffed7024) + val colorCoreOrange600 = Color(0xfff57d33) + val colorCoreOrange500 = Color(0xfffc8943) + val colorCoreOrange400 = Color(0xffff9c5d) + val colorCoreOrange300 = Color(0xffffb180) + val colorCoreOrange200 = Color(0xffffc6a4) + val colorCoreOrange100 = Color(0xfffcdccc) + val colorCoreOrange0 = Color(0xffffede3) + val colorCoreRed1100 = Color(0xff2b1111) + val colorCoreRed1000 = Color(0xff6d1313) + val colorCoreRed900 = Color(0xff992222) + val colorCoreRed800 = Color(0xffc63434) + val colorCoreRed700 = Color(0xffdb3e3e) + val colorCoreRed600 = Color(0xffed4c42) + val colorCoreRed500 = Color(0xfff76054) + val colorCoreRed400 = Color(0xffff7f6e) + val colorCoreRed300 = Color(0xffff9c8f) + val colorCoreRed200 = Color(0xffffb8b1) + val colorCoreRed100 = Color(0xffffd5d2) + val colorCoreRed0 = Color(0xffffeae9) + val colorCorePink1100 = Color(0xff2b1721) + val colorCorePink1000 = Color(0xff561231) + val colorCorePink900 = Color(0xff931847) + val colorCorePink800 = Color(0xffb22f5b) + val colorCorePink700 = Color(0xffce3665) + val colorCorePink600 = Color(0xffe0447c) + val colorCorePink500 = Color(0xffef588b) + val colorCorePink400 = Color(0xffff76ae) + val colorCorePink300 = Color(0xffff95c1) + val colorCorePink200 = Color(0xffffb5d5) + val colorCorePink100 = Color(0xfffcdbeb) + val colorCorePink0 = Color(0xffffe9f3) + val colorCoreMagenta1100 = Color(0xff29192d) + val colorCoreMagenta1000 = Color(0xff451551) + val colorCoreMagenta900 = Color(0xff6c2277) + val colorCoreMagenta800 = Color(0xff8f3896) + val colorCoreMagenta700 = Color(0xffac44a8) + val colorCoreMagenta600 = Color(0xffc44eb9) + val colorCoreMagenta500 = Color(0xffdb61db) + val colorCoreMagenta400 = Color(0xfff282f5) + val colorCoreMagenta300 = Color(0xffedadf2) + val colorCoreMagenta200 = Color(0xfff4c4f7) + val colorCoreMagenta100 = Color(0xfff9e3fc) + val colorCoreMagenta0 = Color(0xfffef0ff) + val colorCorePurple1100 = Color(0xff1d1d38) + val colorCorePurple1000 = Color(0xff2d246b) + val colorCorePurple900 = Color(0xff483a9c) + val colorCorePurple800 = Color(0xff5e4eba) + val colorCorePurple700 = Color(0xff6f5ed3) + val colorCorePurple600 = Color(0xff816fea) + val colorCorePurple500 = Color(0xff9180f4) + val colorCorePurple400 = Color(0xffa193f2) + val colorCorePurple300 = Color(0xffc1c1f7) + val colorCorePurple200 = Color(0xffd8d7f9) + val colorCorePurple100 = Color(0xffeaeaf9) + val colorCorePurple0 = Color(0xfff2f2f9) + val colorCoreBlue1100 = Color(0xff002138) + val colorCoreBlue1000 = Color(0xff0a3960) + val colorCoreBlue900 = Color(0xff0c5689) + val colorCoreBlue800 = Color(0xff116daa) + val colorCoreBlue700 = Color(0xff2079c3) + val colorCoreBlue600 = Color(0xff2b87d3) + val colorCoreBlue500 = Color(0xff3896e3) + val colorCoreBlue400 = Color(0xff56adf5) + val colorCoreBlue300 = Color(0xffa1d2f8) + val colorCoreBlue200 = Color(0xffc7e4f9) + val colorCoreBlue100 = Color(0xffdcf2ff) + val colorCoreBlue0 = Color(0xffe9f8ff) + val colorCoreAqua1100 = Color(0xff002838) + val colorCoreAqua1000 = Color(0xff083d4f) + val colorCoreAqua900 = Color(0xff035e73) + val colorCoreAqua800 = Color(0xff0f6e84) + val colorCoreAqua700 = Color(0xff0b8599) + val colorCoreAqua600 = Color(0xff0797ae) + val colorCoreAqua500 = Color(0xff17b8ce) + val colorCoreAqua400 = Color(0xff33d6e2) + val colorCoreAqua300 = Color(0xff76e5e2) + val colorCoreAqua200 = Color(0xffa5f2f2) + val colorCoreAqua100 = Color(0xffc5f9f9) + val colorCoreAqua0 = Color(0xffd9fcfb) + val colorCoreTeal1100 = Color(0xff002528) + val colorCoreTeal1000 = Color(0xff083f3f) + val colorCoreTeal900 = Color(0xff026661) + val colorCoreTeal800 = Color(0xff067c7c) + val colorCoreTeal700 = Color(0xff0b968f) + val colorCoreTeal600 = Color(0xff00a99c) + val colorCoreTeal500 = Color(0xff08c4b2) + val colorCoreTeal400 = Color(0xff24e0c5) + val colorCoreTeal300 = Color(0xff7dead5) + val colorCoreTeal200 = Color(0xffb3f2e6) + val colorCoreTeal100 = Color(0xffcdf7ef) + val colorCoreTeal0 = Color(0xffe5f9f5) + val colorCoreGreen1100 = Color(0xff002b20) + val colorCoreGreen1000 = Color(0xff08422f) + val colorCoreGreen900 = Color(0xff006b40) + val colorCoreGreen800 = Color(0xff008b46) + val colorCoreGreen700 = Color(0xff0ca750) + val colorCoreGreen600 = Color(0xff2bb656) + val colorCoreGreen500 = Color(0xff59cb59) + val colorCoreGreen400 = Color(0xff75dd66) + val colorCoreGreen300 = Color(0xff98e58e) + val colorCoreGreen200 = Color(0xffc2f2bd) + val colorCoreGreen100 = Color(0xffd7f4d7) + val colorCoreGreen0 = Color(0xffebf9eb) + val colorFontSuccess = colorCoreGreen1000 + val colorFontWarning = colorCoreOrange1000 + val colorFontDanger = colorCoreRed1000 + val colorFontTertiary = colorCoreNeutral800 + val colorFontSecondary = colorCoreNeutral900 + val colorFontPrimary = colorCoreNeutral1100 + val colorBrandSecondary = colorCorePurple700 + val colorBrandPrimary = colorCoreAqua700 + val colorBorderPrimary = colorCoreNeutral300 + val colorBackgroundInfo = colorCoreBlue0 + val colorBackgroundSuccess = colorCoreGreen0 + val colorBackgroundWarning = colorCoreOrange0 + val colorBackgroundDanger = colorCoreRed0 + val colorBackgroundTertiary = colorCoreNeutral200 + val colorBackgroundSecondary = colorCoreNeutral100 + val colorBackgroundPrimary = colorCoreNeutral0 + val colorFontInteractiveDisabled = colorFontTertiary + val colorFontInteractiveActive = colorBrandSecondary + val colorFontInteractiveHover = colorBrandPrimary + val colorFontInteractive = colorBrandPrimary + val colorBackgroundDisabled = colorBackgroundTertiary +} +" +`; diff --git a/__integration__/compose.test.js b/__integration__/compose.test.js new file mode 100644 index 000000000..6a6b88979 --- /dev/null +++ b/__integration__/compose.test.js @@ -0,0 +1,65 @@ +/* + * Copyright Target Corporation. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with + * the License. A copy of the License is located at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions + * and limitations under the License. + */ + +const fs = require('fs-extra'); +const StyleDictionary = require('../index'); +const {buildPath} = require('./_constants'); + +describe('integration', () => { + describe('compose', () => { + StyleDictionary.extend({ + source: [`__integration__/tokens/**/*.json`], + platforms: { + compose: { + transformGroup: `compose`, + buildPath, + files: [{ + destination: "StyleDictionary.kt", + format: "compose/object", + className: "StyleDictionary", + packageName: "com.example.tokens" + },{ + destination: "StyleDictionaryWithReferences.kt", + format: "compose/object", + className: "StyleDictionary", + packageName: "com.example.tokens", + options: { + outputReferences: true + } + }] + }, + } + }).buildAllPlatforms(); + + describe(`compose/object`, () => { + const output = fs.readFileSync(`${buildPath}StyleDictionary.kt`, {encoding:`UTF-8`}); + + it(`should match snapshot`, () => { + expect(output).toMatchSnapshot(); + }); + + describe(`with references`, () => { + const output = fs.readFileSync(`${buildPath}StyleDictionaryWithReferences.kt`, {encoding:`UTF-8`}); + + it(`should match snapshot`, () => { + expect(output).toMatchSnapshot(); + }); + + }); + }); + }); +}); + +afterAll(() => { + fs.emptyDirSync(buildPath); +}); \ No newline at end of file diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js index 1ed469c2c..3aa097ebe 100644 --- a/__tests__/common/transforms.test.js +++ b/__tests__/common/transforms.test.js @@ -353,6 +353,23 @@ describe('common', () => { }); }); + describe('color/composeColor', () => { + it('should handle color without alpha', () => { + var value = transforms["color/composeColor"].transformer({ + value: "#aaaaaa" + }); + expect(value).toBe("Color(0xffaaaaaa)"); + }); + + it('should handle color with alpha', () => { + var value = transforms["color/composeColor"].transformer({ + value: "#aaaaaaff" + }); + expect(value).toBe("Color(0xffaaaaaa)"); + }); + + }); + describe('color/UIColor', () => { it('should handle normal colors', () => { var value = transforms["color/UIColor"].transformer({ @@ -562,6 +579,50 @@ describe('common', () => { }); }); + describe('size/compose/remToSp', () => { + it('should work', () => { + var value = transforms["size/compose/remToSp"].transformer({ + value: "1" + }); + expect(value).toBe("16.00.sp"); + }); + it('converts rem to sp using custom base font', () => { + var value = transforms["size/compose/remToSp"].transformer({value: "1"}, {basePxFontSize: 14}); + expect(value).toBe("14.00.sp"); + }); + it('should throw an error if prop value is Nan', () => { + expect( () => transforms["size/compose/remToSp"].transformer({value: "a"})).toThrow(); + }); + }); + + describe('size/compose/em', () => { + it('should work', () => { + var value = transforms["size/compose/em"].transformer({ + value: "10" + }); + expect(value).toBe("10.em"); + }); + it('should throw an error if prop value is Nan', () => { + expect( () => transforms["size/compose/em"].transformer({value: "a"})).toThrow(); + }); + }); + + describe('size/compose/remToDp', () => { + it('should work', () => { + var value = transforms["size/compose/remToDp"].transformer({ + value: "1" + }); + expect(value).toBe("16.00.dp"); + }); + it('converts rem to dp using custom base font', () => { + var value = transforms["size/compose/remToDp"].transformer({value: "1"}, {basePxFontSize: 14}); + expect(value).toBe("14.00.dp"); + }); + it('should throw an error if prop value is Nan', () => { + expect( () => transforms["size/compose/remToDp"].transformer({value: "a"})).toThrow(); + }); + }); + describe('size/swift/remToCGFloat', () => { it('should work', () => { var value = transforms["size/swift/remToCGFloat"].transformer({ diff --git a/__tests__/formats/__snapshots__/all.test.js.snap b/__tests__/formats/__snapshots__/all.test.js.snap index c96ac0fa0..8d2cab735 100644 --- a/__tests__/formats/__snapshots__/all.test.js.snap +++ b/__tests__/formats/__snapshots__/all.test.js.snap @@ -80,6 +80,27 @@ exports[`formats all should match android/strings snapshot 1`] = ` " `; +exports[`formats all should match compose/object snapshot 1`] = ` +" + +// Do not edit directly +// Generated on Sat, 01 Jan 2000 00:00:00 GMT + + + +package ; + + +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.* + +object { + /** comment */ + val color_red = #FF0000 +} +" +`; + exports[`formats all should match css/fonts.css snapshot 1`] = ` " " diff --git a/docs/formats.md b/docs/formats.md index 1c7df44fd..f7f257970 100644 --- a/docs/formats.md +++ b/docs/formats.md @@ -138,6 +138,7 @@ Not all formats use the `outputReferences` option because that file format might * [scss/variables](#scssvariables) * [less/variables](#lessvariables) * [android/resources](#androidresources) +* [compose/object](#composeobject) * [ios-swift/class.swift](#ios-swiftclassswift) * [flutter/class.dart](#flutterclassdart) @@ -1144,6 +1145,48 @@ filter: { * * * +### compose/object + + +Creates a Kotlin file for Compose containing an object with a `val` for each property. + + + + + + + + + + + + + + + + + + + +
ParamTypeDefaultDescription
classNameString

The name of the generated Kotlin object

+
packageNameString

The package for the generated Kotlin object

+
optionsObject
[options.showFileHeader]Booleantrue

Whether or not to include a comment that has the build date

+
[options.outputReferences]Booleanfalse

Whether or not to keep references (a -> b -> c) in the output.

+
+ +**Example** +```kotlin +package com.example.tokens; + +import androidx.compose.ui.graphics.Color + +object StyleDictionary { + val colorBaseRed5 = Color(0xFFFAF3F2) +} +``` + +* * * + ### ios/macros diff --git a/docs/quick_start.md b/docs/quick_start.md index 527637512..7ca552c83 100644 --- a/docs/quick_start.md +++ b/docs/quick_start.md @@ -38,6 +38,10 @@ android ✔︎ build/android/font_dimens.xml ✔︎ build/android/colors.xml +compose +✔︎ build/compose/StyleDictionaryColor.kt +✔︎ build/compose/StyleDictionarySize.kt + ios ✔︎ build/ios/StyleDictionaryColor.h ✔︎ build/ios/StyleDictionaryColor.m @@ -66,6 +70,9 @@ Pat yourself on the back, you built your first style dictionary! Take a look at │ ├── android/ │ ├── font_dimens.xml │ ├── colors.xml +│ ├── compose/ +│ ├── StyleDictionaryColor.kt +│ ├── StyleDictionarySize.kt │ ├── scss/ │ ├── _variables.scss │ ├── ios/ @@ -104,6 +111,31 @@ If you open `config.json` you will see there are 3 platforms defined: scss, andr ``` +**Compose** +```kotlin +object StyleDictionaryColor { + val colorBaseGrayDark = Color(0xff111111) + val colorBaseGrayLight = Color(0xffcccccc) + val colorBaseGrayMedium = Color(0xff999999) + val colorBaseGreen = Color(0xff00ff00) + val colorBaseRed = Color(0xffff0000) + val colorFontBase = Color(0xffff0000) + val colorFontSecondary = Color(0xff00ff00) + val colorFontTertiary = Color(0xffcccccc) +} + +object StyleDictionarySize { + /** the base size of the font */ + val sizeFontBase = 16.00.sp + /** the large size of the font */ + val sizeFontLarge = 32.00.sp + /** the medium size of the font */ + val sizeFontMedium = 16.00.sp + /** the small size of the font */ + val sizeFontSmall = 12.00.sp +} +``` + **SCSS** ```scss $color-base-gray-light: #cccccc; @@ -178,6 +210,18 @@ Now let's make a change and see how that affects things. Open up `properties/col #ffcccccc ``` +```kotlin +object StyleDictionaryColor { + val colorBaseGrayDark = Color(0xff000000) + val colorBaseGrayLight = Color(0xffcccccc) + val colorBaseGrayMedium = Color(0xff999999) + val colorBaseGreen = Color(0xff00ff00) + val colorBaseRed = Color(0xffff0000) + val colorFontBase = Color(0xffff0000) + val colorFontSecondary = Color(0xff00ff00) + val colorFontTertiary = Color(0xffcccccc) +} +``` ```scss $color-base-gray-light: #cccccc; $color-base-gray-medium: #999999; diff --git a/docs/transform_groups.md b/docs/transform_groups.md index 0b0b84561..e6e738a9c 100644 --- a/docs/transform_groups.md +++ b/docs/transform_groups.md @@ -120,6 +120,21 @@ Transforms: [size/remToDp](transforms.md#sizeremtodp) +* * * + +### compose + + +Transforms: + +[attribute/cti](transforms.md#attributecti) +[name/cti/camel](transforms.md#namecticamel) +[color/composeColor](transforms.md#colorcomposecolor) +[size/compose/em](transforms.md#sizecomposeem) +[size/compose/remToSp](transforms.md#sizecomposeremtosp) +[size/compose/remToDp](transforms.md#sizecomposeremtodp) + + * * * ### ios diff --git a/docs/transforms.md b/docs/transforms.md index bf3de797b..d793a23a1 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -284,6 +284,20 @@ Transforms the value into an 8-digit hex string for Android because they put the ``` +* * * + +### color/composeColor + + +Transforms the value into a Color class for Compose + +```kotlin +// Matches: prop.attributes.category === 'color' +// Returns: +Color(0xFF009688) +``` + + * * * ### color/UIColor @@ -465,6 +479,48 @@ Scales the number by 16 (or the value of 'basePxFontSize' on the platform in you ``` +* * * + +### size/compose/remToSp + + +Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (common base font size on web). + +```kotlin +// Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font' +// Returns: +"16.0.sp" +``` + + +* * * + +### size/compose/remToDp + + +Transforms the value from a REM size on web into a density-independent pixel (dp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config). + +```kotlin +// Matches: prop.attributes.category === 'size' && prop.attributes.type !== 'font' +// Returns: +"16.0.dp" +``` + + +* * * + +### size/compose/em + + +Adds the .em Compose extension to the end of a number. Does not scale the value + +```kotlin +// Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font' +// Returns: +"16.0em" +``` + + * * * ### size/swift/remToCGFloat diff --git a/examples/basic/README.md b/examples/basic/README.md index 599cd4908..cd02479f9 100644 --- a/examples/basic/README.md +++ b/examples/basic/README.md @@ -21,6 +21,10 @@ android ✔︎ build/android/font_dimens.xml ✔︎ build/android/colors.xml +compose +✔︎ build/compose/StyleDictionaryColor.kt +✔︎ build/compose/StyleDictionarySize.kt + ios ✔︎ build/ios/StyleDictionaryColor.h ✔︎ build/ios/StyleDictionaryColor.m @@ -49,6 +53,9 @@ Good for you! You have now built your first style dictionary! Moving on, take a │ ├── android/ │ ├── font_dimens.xml │ ├── colors.xml +│ ├── compose/ +│ ├── StyleDictionaryColor.kt +│ ├── StyleDictionarySize.kt │ ├── scss/ │ ├── _variables.scss │ ├── ios/ @@ -62,7 +69,7 @@ Good for you! You have now built your first style dictionary! Moving on, take a │ ├── StyleDictionarySize.swift ``` -If you open `config.json` you will see there are 3 platforms defined: scss, android, ios. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these: +If you open `config.json` you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these: **Android** ```xml @@ -87,6 +94,31 @@ If you open `config.json` you will see there are 3 platforms defined: scss, andr ``` +**Compose** +```kotlin +object StyleDictionaryColor { + val colorBaseGrayDark = Color(0xff111111) + val colorBaseGrayLight = Color(0xffcccccc) + val colorBaseGrayMedium = Color(0xff999999) + val colorBaseGreen = Color(0xff00ff00) + val colorBaseRed = Color(0xffff0000) + val colorFontBase = Color(0xffff0000) + val colorFontSecondary = Color(0xff00ff00) + val colorFontTertiary = Color(0xffcccccc) +} + +object StyleDictionarySize { + /** the base size of the font */ + val sizeFontBase = 16.00.sp + /** the large size of the font */ + val sizeFontLarge = 32.00.sp + /** the medium size of the font */ + val sizeFontMedium = 16.00.sp + /** the small size of the font */ + val sizeFontSmall = 12.00.sp +} +``` + **SCSS** ```scss // variables.scss diff --git a/examples/basic/config.json b/examples/basic/config.json index 7376e16e8..b0faee147 100644 --- a/examples/basic/config.json +++ b/examples/basic/config.json @@ -20,6 +20,32 @@ "format": "android/colors" }] }, + "compose": { + "transformGroup": "compose", + "buildPath": "build/compose/", + "files": [{ + "destination": "StyleDictionaryColor.kt", + "format": "compose/object", + "className": "StyleDictionaryColor", + "packageName": "StyleDictionaryColor", + "filter": { + "attributes": { + "category": "color" + } + } + },{ + "destination": "StyleDictionarySize.kt", + "format": "compose/object", + "className": "StyleDictionarySize", + "packageName": "StyleDictionarySize", + "type": "float", + "filter": { + "attributes": { + "category": "size" + } + } + }] + }, "ios": { "transformGroup": "ios", "buildPath": "build/ios/", diff --git a/lib/common/formatHelpers/createPropertyFormatter.js b/lib/common/formatHelpers/createPropertyFormatter.js index a5facb7bf..75393252f 100644 --- a/lib/common/formatHelpers/createPropertyFormatter.js +++ b/lib/common/formatHelpers/createPropertyFormatter.js @@ -108,7 +108,7 @@ function createPropertyFormatter({outputReferences, dictionary, format, formatti to_ret_prop += suffix; - if (prop.comment) { + if (prop.comment && commentStyle !== 'none') { if (commentStyle === 'short') { to_ret_prop = to_ret_prop.concat(` // ${prop.comment}`); } else { diff --git a/lib/common/formats.js b/lib/common/formats.js index 187a3db73..dc8a9f509 100644 --- a/lib/common/formats.js +++ b/lib/common/formats.js @@ -549,6 +549,52 @@ module.exports = { return template({dictionary, file, options, fileHeader}); }, + // Compose templates + /** + * Creates a Kotlin file for Compose containing an object with a `val` for each property. + * + * @memberof Formats + * @kind member + * @param {String} className The name of the generated Kotlin object + * @param {String} packageName The package for the generated Kotlin object + * @param {Object} options + * @param {Boolean} [options.showFileHeader=true] - Whether or not to include a comment that has the build date + * @param {Boolean} [options.outputReferences=false] - Whether or not to keep [references](/#/formats?id=references-in-output-files) (a -> b -> c) in the output. + * @example + * ```kotlin + * package com.example.tokens; + * + * import androidx.compose.ui.graphics.Color + * + * object StyleDictionary { + * val colorBaseRed5 = Color(0xFFFAF3F2) + * } + * ``` + */ + 'compose/object': function({dictionary, options, file}) { + const template = _template( + fs.readFileSync(__dirname + '/templates/compose/object.kt.template') + ); + let allProperties; + const { outputReferences } = options; + const formatProperty = createPropertyFormatter({ + outputReferences, + dictionary, + formatting: { + suffix: '', + commentStyle: 'none' // We will add the comment in the format template + } + }); + + if (outputReferences) { + allProperties = [...dictionary.allProperties].sort(sortByReference(dictionary)); + } else { + allProperties = [...dictionary.allProperties].sort(sortByName); + } + + return template({allProperties, file, options, formatProperty, fileHeader}); + }, + // iOS templates /** * Creates an Objective-C header file with macros for style properties diff --git a/lib/common/templates/compose/object.kt.template b/lib/common/templates/compose/object.kt.template new file mode 100644 index 000000000..997c8041b --- /dev/null +++ b/lib/common/templates/compose/object.kt.template @@ -0,0 +1,32 @@ +<% +// +// Copyright 2020 Target Corporation. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"). +// You may not use this file except in compliance with the License. +// A copy of the License is located at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// or in the "license" file accompanying this file. This file is distributed +// on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either +// express or implied. See the License for the specific language governing +// permissions and limitations under the License. +%> +<%= fileHeader({file, commentStyle: 'short'}) %> + +package <%= file.packageName %>; + +<% // Ideally we would selectively import the correct classes & functions based on whether the applied transforms actually need them. %> +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.* + +object <%= file.className %> { + <%= allProperties.map(function(prop) { + let comment = ""; + if (prop.comment) { + comment = `/** ${prop.comment} */\n ` + } + return comment + 'val ' + formatProperty(prop) + }).join('\n ' ) %> +} diff --git a/lib/common/transformGroups.js b/lib/common/transformGroups.js index 20d261cfa..6dcbe5eba 100644 --- a/lib/common/transformGroups.js +++ b/lib/common/transformGroups.js @@ -146,6 +146,26 @@ module.exports = { 'size/remToSp', 'size/remToDp' ], + /** + * Transforms: + * + * [attribute/cti](transforms.md#attributecti) + * [name/cti/camel](transforms.md#namecticamel) + * [color/composeColor](transforms.md#colorcomposecolor) + * [size/compose/em](transforms.md#sizecomposeem) + * [size/compose/remToSp](transforms.md#sizecomposeremtosp) + * [size/compose/remToDp](transforms.md#sizecomposeremtodp) + * + * @memberof TransformGroups + */ + 'compose': [ + 'attribute/cti', + 'name/cti/camel', + 'color/composeColor', + 'size/compose/em', + 'size/compose/remToSp', + 'size/compose/remToDp' + ], /** * Transforms: * diff --git a/lib/common/transforms.js b/lib/common/transforms.js index 3acc42986..5606909cb 100644 --- a/lib/common/transforms.js +++ b/lib/common/transforms.js @@ -408,6 +408,26 @@ module.exports = { } }, + /** + * Transforms the value into a Color class for Compose + * + * ```kotlin + * // Matches: prop.attributes.category === 'color' + * // Returns: + * Color(0xFF009688) + * ``` + * + * @memberof Transforms + */ + 'color/composeColor': { + type: 'value', + matcher: isColor, + transformer: function (prop) { + var str = Color(prop.value).toHex8(); + return 'Color(0x' + str.slice(6) + str.slice(0,6) + ')' + } + }, + /** * Transforms the value into an UIColor class for iOS * @@ -695,6 +715,72 @@ module.exports = { } }, + /** + * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (common base font size on web). + * + * ```kotlin + * // Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font' + * // Returns: + * "16.0.sp" + * ``` + * + * @memberof Transforms + */ + 'size/compose/remToSp': { + type: 'value', + matcher: isFontSize, + transformer: function(prop, options) { + const val = parseFloat(prop.value); + const baseFont = getBasePxFontSize(options); + if (isNaN(val)) throwSizeError(prop.name, prop.value, 'sp'); + return (val * baseFont).toFixed(2) + '.sp'; + } + }, + + + /** + * Transforms the value from a REM size on web into a density-independent pixel (dp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config). + * + * ```kotlin + * // Matches: prop.attributes.category === 'size' && prop.attributes.type !== 'font' + * // Returns: + * "16.0.dp" + * ``` + * + * @memberof Transforms + */ + 'size/compose/remToDp': { + type: 'value', + matcher: isNotFontSize, + transformer: function(prop, options) { + const val = parseFloat(prop.value); + const baseFont = getBasePxFontSize(options); + if (isNaN(val)) throwSizeError(prop.name, prop.value, 'dp'); + return (val * baseFont).toFixed(2) + '.dp'; + } + }, + + /** + * Adds the .em Compose extension to the end of a number. Does not scale the value + * + * ```kotlin + * // Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font' + * // Returns: + * "16.0em" + * ``` + * + * @memberof Transforms + */ + 'size/compose/em': { + type: 'value', + matcher: isFontSize, + transformer: function(prop) { + const val = parseFloat(prop.value); + if (isNaN(val)) throwSizeError(prop.name, prop.value, 'em'); + return val + '.em'; + } + }, + /** * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Swift and initializes a CGFloat * diff --git a/scripts/handlebars/templates/formats.hbs b/scripts/handlebars/templates/formats.hbs index 4a4ec6ce2..2ac2bd9e8 100644 --- a/scripts/handlebars/templates/formats.hbs +++ b/scripts/handlebars/templates/formats.hbs @@ -134,6 +134,7 @@ Not all formats use the `outputReferences` option because that file format might * [scss/variables](#scssvariables) * [less/variables](#lessvariables) * [android/resources](#androidresources) +* [compose/object](#composeobject) * [ios-swift/class.swift](#ios-swiftclassswift) * [flutter/class.dart](#flutterclassdart)