Skip to content

Commit

Permalink
Update colors in components. Update config
Browse files Browse the repository at this point in the history
  • Loading branch information
@narin
narin committed Jan 18, 2024
1 parent 42f7489 commit 917cdef
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 73 deletions.
94 changes: 47 additions & 47 deletions packages/components/src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -59,80 +59,81 @@ export const Button: React.FC<ButtonProps> = ({

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
}
}

Expand Down Expand Up @@ -181,8 +182,7 @@ export const Button: React.FC<ButtonProps> = ({
accessible={true}
aria-label={a11yLabel}
testID={testID || label}
testOnly_pressed={testOnlyPressed}
>
testOnly_pressed={testOnlyPressed}>
{({ pressed }: PressableStateCallbackType) => (
<Text style={getTextStyle(pressed)}>{label}</Text>
)}
Expand Down
17 changes: 8 additions & 9 deletions packages/components/src/components/SegmentedControl/SegmentedControl.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -67,13 +67,13 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
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 = {
Expand Down Expand Up @@ -130,8 +130,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
role={'tab'}
accessibilityState={{ selected: isSelected }}
style={PressableOpacityStyle()}
testID={testIDs?.[index]}
>
testID={testIDs?.[index]}>
<Text allowFontScaling={false} style={textStyle}>
{label}
</Text>
Expand Down
36 changes: 21 additions & 15 deletions packages/tokens/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)};`
},
Expand All @@ -27,26 +37,22 @@ StyleDictionary.registerFormat({
module.exports = {
source: [
'../../node_modules/@department-of-veterans-affairs/css-library/dist/tokens/json/variables.json',
// 'src/uswds/*.json',
],
platforms: {
rn: {
transformGroup: 'react-native',
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',
Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 917cdef

Please sign in to comment.