diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 55df978c..a7a0cffc 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens' +import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { Pressable, PressableStateCallbackType, @@ -59,80 +59,81 @@ export const Button: React.FC = ({ switch (buttonType) { case ButtonVariants.Base: - bgColor = DesignTokens.colorGrayMedium - bgColorPressed = DesignTokens.colorUswdsSystemColorGray80 - textColor = DesignTokens.colorGrayLightest - textColorPressed = DesignTokens.colorGrayLightest + bgColor = Colors.GrayMedium + bgColor = Colors.GrayMedium + bgColorPressed = Colors.UswdsGray80 + textColor = Colors.GrayLightest + textColorPressed = Colors.GrayLightest if (isDarkMode) { - bgColor = DesignTokens.colorGrayLightest - bgColorPressed = DesignTokens.colorUswdsSystemColorGray30 - textColor = DesignTokens.colorBlack - textColorPressed = DesignTokens.colorBlack + bgColor = Colors.GrayLightest + bgColorPressed = Colors.UswdsGray30 + textColor = Colors.Black + textColorPressed = Colors.Black } break case ButtonVariants.BaseSecondary: bgColor = 'transparent' bgColorPressed = 'transparent' - borderColor = DesignTokens.colorGrayMedium - borderColorPressed = DesignTokens.colorUswdsSystemColorGray80 - textColor = DesignTokens.colorGrayMedium - textColorPressed = DesignTokens.colorUswdsSystemColorGray80 + borderColor = Colors.GrayMedium + borderColorPressed = Colors.UswdsGray80 + textColor = Colors.GrayMedium + textColorPressed = Colors.UswdsGray80 borderWidth = 2 if (isDarkMode) { - borderColor = DesignTokens.colorGrayLightest - borderColorPressed = DesignTokens.colorUswdsSystemColorGray30 - textColor = DesignTokens.colorGrayLightest - textColorPressed = DesignTokens.colorUswdsSystemColorGray30 + borderColor = Colors.GrayLightest + borderColorPressed = Colors.UswdsGray30 + textColor = Colors.GrayLightest + textColorPressed = Colors.UswdsGray30 } break case ButtonVariants.Destructive: - bgColor = DesignTokens.colorUswdsSystemColorRedVivid60 - bgColorPressed = DesignTokens.colorUswdsSystemColorRedVivid80 - textColor = DesignTokens.colorGrayLightest - textColorPressed = DesignTokens.colorGrayLightest + bgColor = Colors.UswdsRedVivid60 + bgColorPressed = Colors.UswdsRedVivid80 + textColor = Colors.GrayLightest + textColorPressed = Colors.GrayLightest if (isDarkMode) { - bgColor = DesignTokens.colorUswdsSystemColorRedVivid40 - bgColorPressed = DesignTokens.colorSecondaryLightest - textColor = DesignTokens.colorBlack - textColorPressed = DesignTokens.colorBlack + bgColor = Colors.UswdsRedVivid40 + bgColorPressed = Colors.SecondaryLightest + textColor = Colors.Black + textColorPressed = Colors.Black } break case ButtonVariants.Secondary: bgColor = 'transparent' bgColorPressed = 'transparent' - borderColor = DesignTokens.colorUswdsSystemColorBlueVivid60 - borderColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80 - textColor = DesignTokens.colorUswdsSystemColorBlueVivid60 - textColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80 + borderColor = Colors.UswdsBlueVivid60 + borderColorPressed = Colors.UswdsBlueWarmVivid80 + textColor = Colors.UswdsBlueVivid60 + textColorPressed = Colors.UswdsBlueWarmVivid80 borderWidth = 2 if (isDarkMode) { - borderColor = DesignTokens.colorUswdsSystemColorBlueVivid30 - borderColorPressed = DesignTokens.colorWhite - textColor = DesignTokens.colorUswdsSystemColorBlueVivid30 - textColorPressed = DesignTokens.colorWhite + borderColor = Colors.UswdsBlueVivid30 + borderColorPressed = Colors.White + textColor = Colors.UswdsBlueVivid30 + textColorPressed = Colors.White } break case ButtonVariants.White: - bgColor = DesignTokens.colorGrayLightest - bgColorPressed = DesignTokens.colorUswdsSystemColorGray30 - textColor = DesignTokens.colorBlack - textColorPressed = DesignTokens.colorBlack + bgColor = Colors.GrayLightest + bgColorPressed = Colors.UswdsGray30 + textColor = Colors.Black + textColorPressed = Colors.Black break default: - bgColor = DesignTokens.colorUswdsSystemColorBlueVivid60 - bgColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80 - textColor = DesignTokens.colorGrayLightest - textColorPressed = DesignTokens.colorGrayLightest + bgColor = Colors.UswdsBlueVivid60 + bgColorPressed = Colors.UswdsBlueWarmVivid80 + textColor = Colors.GrayLightest + textColorPressed = Colors.GrayLightest if (isDarkMode) { - bgColor = DesignTokens.colorUswdsSystemColorBlueVivid30 - bgColorPressed = DesignTokens.colorPrimaryAltLightest - textColor = DesignTokens.colorBlack - textColorPressed = DesignTokens.colorBlack + bgColor = Colors.UswdsBlueVivid30 + bgColorPressed = Colors.PrimaryAltLightest + textColor = Colors.Black + textColorPressed = Colors.Black } } @@ -181,8 +182,7 @@ export const Button: React.FC = ({ accessible={true} aria-label={a11yLabel} testID={testID || label} - testOnly_pressed={testOnlyPressed} - > + testOnly_pressed={testOnlyPressed}> {({ pressed }: PressableStateCallbackType) => ( {label} )} diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index 30487dce..6e1e0b76 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx @@ -1,4 +1,4 @@ -import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens' +import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { Pressable, Text, @@ -67,13 +67,13 @@ export const SegmentedControl: FC = ({ let textColor: string, activeBgColor: string, inactiveBgColor: string if (colorScheme === 'light') { - textColor = DesignTokens.colorGrayDark - activeBgColor = DesignTokens.colorWhite - inactiveBgColor = DesignTokens.colorGrayLighter + textColor = Colors.GrayDark + activeBgColor = Colors.White + inactiveBgColor = Colors.GrayLighter } else { - textColor = DesignTokens.colorGrayLightest - activeBgColor = DesignTokens.colorGrayMedium - inactiveBgColor = DesignTokens.colorGrayDark + textColor = Colors.GrayLightest + activeBgColor = Colors.GrayMedium + inactiveBgColor = Colors.GrayDark } const viewStyle: ViewStyle = { @@ -130,8 +130,7 @@ export const SegmentedControl: FC = ({ role={'tab'} accessibilityState={{ selected: isSelected }} style={PressableOpacityStyle()} - testID={testIDs?.[index]} - > + testID={testIDs?.[index]}> {label} diff --git a/packages/tokens/config.js b/packages/tokens/config.js index c7e14acf..ca23a248 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -2,16 +2,26 @@ const tokenCategories = require('./src/tokens') const StyleDictionary = require('style-dictionary') +StyleDictionary.registerFilter({ + name: 'isColor', + matcher: function (token) { + return token.attributes.category.includes('color') + }, +}) + StyleDictionary.registerFormat({ name: 'javascript/es6/vads-colors', formatter: function (dictionary) { console.log(`dictionary`, dictionary) - const colorTokens = dictionary.allProperties - .filter((token) => token.attributes.category === 'color') - .reduce((result, token) => { - result[token.name.replace('color', '')] = token.value - return result - }, {}) + const colorTokens = dictionary.allProperties.reduce((result, token) => { + result[ + token.name + .replace('color', '') + .replace('SystemColor', '') + .replace('uswds', 'Uswds') + ] = token.value + return result + }, {}) return `export const Colors = ${JSON.stringify(colorTokens, null, 2)};` }, @@ -27,7 +37,6 @@ StyleDictionary.registerFormat({ module.exports = { source: [ '../../node_modules/@department-of-veterans-affairs/css-library/dist/tokens/json/variables.json', - // 'src/uswds/*.json', ], platforms: { rn: { @@ -35,18 +44,15 @@ module.exports = { buildPath: './dist/', prefix: '', files: [ - { - destination: 'js/tokens.js', - format: 'javascript/es6', - }, + // { + // destination: 'js/tokens.js', + // format: 'javascript/es6', + // }, { destination: 'js/index.js', format: 'javascript/es6/vads-colors', + filter: 'isColor', }, - // { - // format: 'typescript/es6-declarations', - // destination: 'index.d.ts', - // }, { destination: 'index.d.ts', format: 'typescript/es6-declarations/colors', diff --git a/yarn.lock b/yarn.lock index c26b7d89..4c065e91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2974,8 +2974,8 @@ __metadata: "@department-of-veterans-affairs/mobile-tokens@file:../tokens::locator=%40department-of-veterans-affairs%2Fmobile-component-library%40workspace%3Apackages%2Fcomponents": version: 0.3.1 - resolution: "@department-of-veterans-affairs/mobile-tokens@file:../tokens#../tokens::hash=f4200a&locator=%40department-of-veterans-affairs%2Fmobile-component-library%40workspace%3Apackages%2Fcomponents" - checksum: 465af3405aacef2ec0a02f71d11721739c894fe54d4d62a5c78086c0b32d8577a2bd16c60eceab7ec90fa5f824ba63423dcdc73940aaf572d43434fbe6236949 + resolution: "@department-of-veterans-affairs/mobile-tokens@file:../tokens#../tokens::hash=0e12a2&locator=%40department-of-veterans-affairs%2Fmobile-component-library%40workspace%3Apackages%2Fcomponents" + checksum: 6529b43cccfdc8d27e85b1f4d94638d043d3d8335efa0619429c22b8b6e33c4865870002572aefbe8e44f73041f54b4a7a7ec3f0d45f7f3911a31a512c8fc893 languageName: node linkType: hard