humancompanion-usds commented 1 year ago

Description

Add color tokens for the mobile app from their Figma file: https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?type=design&node-id=3817-7448&mode=design&t=nBrJUSB2Li8QZIPi-0

Screenshot 2023-09-13 at 5 23 56 PM

Details

Need to think about where mobile fits into the taxonomy of tokens.

Tasks

[ ] Add tokens to airtable
[ ] Add tokens to Figma foundational color variables
[ ] Export tokens for mobile team to consume

Acceptance Criteria

[ ] Mobile team is using mobile color tokens

humancompanion-usds commented 1 year ago

// va-mobile-app specific colors blackWith30PercentOpacity: '#0000004D', crisisLineRed: '#b51c08', toolbarBackgroundGray: '#f9f9f9', whiteWith70PercentOpacity: '#ffffffb3', snackBarBlack: '#1E1E1E', // dark mode darkmodeGrayDark: '#121212', darkmodeBorder: '#4C4C4C', darkmodeLightBlue: '#409CFF', darkmodeRed: '#FF4F5B', darkmodeGrayWarmDark: '#292929', primaryDarker2: '#2864AF',

From https://github.com/department-of-veterans-affairs/va-mobile-app/blob/develop/VAMobile/src/styles/themes/VAColors.ts

Light and dark: https://github.com/department-of-veterans-affairs/va-mobile-app/blob/develop/VAMobile/src/styles/themes/colorSchemes.ts

humancompanion-usds commented 10 months ago

Most of these colors are not in the USWDS palette thus we cannot support them. The flagship mobile app team will need to choose from the USWDS palette.

2864AF - "primary darker 2" - We already have primary-dark and primary-darker. In USWDS there are blue, blue warm, and blue cool color ramps with both normal and vivid to choose from (a total of 60 colors). I don't have a suggested color to move to here.

292929 - "darkmodeGrayWarmDark" - I would suggest this move to gray-warm-80 (#2E2E2A)

FF4F5B - "darkmodeRed" - I would suggest this move to red-40v (#FB5A47)

409CFF - "darkmodeLightBlue" - Could move to blue-warm-40v (#5994F6)

4C4C4C - "darkmodeBorder" - Could move to gray-70 (#454545)

1E1E1E - "snackBardBlack" - Could move to gray-cool-90 (#1C1D1F)

B51C08 - "crisisLineRed" - We have a token for this that would work, vads-color-secondary-darkest which is red-70v (#8B0A03). However, we are in the process of adding component level tokens so I can add a token for the Crisis Line modal red but it will be red-70v.

There were 2 colors that did match USWDS colors. Messaged Ryan about how they want to proceed. I used this tool for the nearest USWDS colors.

humancompanion-usds commented 10 months ago

Another question I have is around the semantic token needs of the mobile app. We can create, for example, vads-color-primary-dark-on-light, vads-color-primary-dark-on-dark, vads-color-secondary-lightest-on-light, vads-color-secondary-lightest-on-dark because those have some semantic meaning. What I'd like to move away from is just red/blue/gray-on-light or on-dark because then we don't understand how those are being used. They lack any semantic meaning. We still have red, blue, gray, gold, green, etc. But we're going to try to get rid of those over time.

jessicawoodin commented 8 months ago

I wanted to provide a quick update from the mobile app team. We're currently in the process of figuring out a few things related to this ticket:

We're starting to look into how semantic tokens are going to work in the mobile design system and in the mobile app. Currently, the mobile app does not have "on-dark" or "on-light" included in any variable names. Instead, the same variable name is used in both light and dark mode, and we use themes to identify the color in each mode. We'll follow up when we've determined how this will work in the mobile design system. (cc @narin)
We're also working to clean up our colors as we build the design tokens. The Design Library file is currently out-of-date and we're building a more accurate list of colors here. All of these colors will either be from VADS or USWDS. Apologies for any confusion with the Design Library file. We'll follow up when we have the updated list of colors.

humancompanion-usds commented 4 months ago

New token names are as follows:

Action colors (used in buttons, action menus) vads-color-primary-on-dark ➡️ vads-color-action-surface-default-on-dark vads-color-secondary-on-dark ➡️ vads-color-action-surface-destructive-on-dark vads-color-base-active-on-light ➡️ vads-color-action-border-base-active-on-light vads-color-base-active-on-dark ➡️ vads-color-action-border-base-active-on-dark Feedback colors (used in alerts, snackbar, loading indicator) vads-color-info-darker-on-dark ➡️ vads-color-feedback-surface-info-on-dark vads-color-success-darker-on-dark ➡️ vads-color-feedback-surface-success-on-dark vads-color-warning-darker-on-dark ➡️ vads-color-feedback-surface-warning-on-dark vads-color-error-darker-on-dark ➡️ vads-color-feedback-surface-error-on-dark vads-color-warning-on-dark ➡️ vads-color-feedback-border-warning-on-dark App background color vads-color-gray-darkest-on-dark ➡️ vads-color-bg-default-on-dark