Color semantic tokens. Solutions banner. (#37)

Author: yulolimum

app/screens/GameDetailsScreen.tsx

@@ -5,7 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { colors, sizes } from '../../shared/theme'
 import { Text } from '../components/Text'
 
-export const GamesListScreen = () => {
+export const GameDetailsScreen = () => {
   const { bottom: paddingBottom, top: paddingTop } = useSafeAreaInsets()
 
   return (
@@ -21,7 +21,7 @@ export const GamesListScreen = () => {
 
 const $screen: ViewStyle = {
   flex: 1,
-  backgroundColor: colors.tokens.backgroundSurface100,
+  backgroundColor: colors.background.primary,
   paddingHorizontal: sizes.spacing.md,
   justifyContent: 'space-between',
 }

app/screens/GamesListScreen.tsx

@@ -21,7 +21,7 @@ export const GamesListScreen = () => {
 
 const $screen: ViewStyle = {
   flex: 1,
-  backgroundColor: colors.tokens.backgroundSurface100,
+  backgroundColor: colors.background.primary,
   paddingHorizontal: sizes.spacing.md,
   justifyContent: 'space-between',
 }

app/screens/ReviewScreen.tsx

@@ -5,7 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { colors, sizes } from '../../shared/theme'
 import { Text } from '../components/Text'
 
-export const GamesListScreen = () => {
+export const ReviewScreen = () => {
   const { bottom: paddingBottom, top: paddingTop } = useSafeAreaInsets()
 
   return (
@@ -21,7 +21,7 @@ export const GamesListScreen = () => {
 
 const $screen: ViewStyle = {
   flex: 1,
-  backgroundColor: colors.tokens.backgroundSurface100,
+  backgroundColor: colors.background.primary,
   paddingHorizontal: sizes.spacing.md,
   justifyContent: 'space-between',
 }

index.js

@@ -11,10 +11,13 @@ import { name as appName } from './app.json'
 import AppAssignment from './app/App'
 import { setupMockServer } from './msw'
 import { customFontsToLoad } from './shared/theme'
-import { setupAppModeSelector } from './shared/utils/trainingHelper'
+import {
+  setupTrainingAppModeSelector,
+  TrainingBanners,
+} from './shared/utils/trainingHelper'
 import AppChapter7 from './solutions/chapter7/App'
 
-const activeAppMode = setupAppModeSelector()
+const activeAppMode = setupTrainingAppModeSelector()
 
 setupMockServer()
 
@@ -48,7 +51,11 @@ function App() {
 
   if (!areFontsLoaded) return null
 
-  return <AppMode />
+  return (
+    <TrainingBanners appMode={activeAppMode}>
+      <AppMode />
+    </TrainingBanners>
+  )
 }
 
 AppRegistry.registerComponent(appName, () => App)

package.json

@@ -5,10 +5,10 @@
   "scripts": {
     "android": "react-native run-android",
     "clean": "./scripts/clean",
-    "generate:theme": "style-dictionary build --config ./sd.config.js",
+    "generate:tokens": "style-dictionary build --config ./sd.config.js",
     "postinstall": "./scripts/postinstall",
     "ios": "react-native run-ios",
-    "lint": "./scripts/lint-format",
+    "lint": "./scripts/tsc-lint-format",
     "setup": "./scripts/setup/index",
     "start": "react-native start",
     "test": "jest"

scripts/lint-format scripts/tsc-lint-formatscripts/lint-format renamed to scripts/tsc-lint-format

@@ -1,9 +1,11 @@
 #!/usr/bin/env bash
 set -e 
 
+# Runs tsc.
+tsc ./index.js --skipLibCheck --noEmit --jsx react-native --esModuleInterop --allowJs --resolveJsonModule
+
 # Runs eslint (and eslint prettier plugin) for the specified extensions.
 eslint . --fix --ext .js,.ts,.tsx,.cjs,.mjs --cache
 
 # Additionally format files outside of eslint's scope.
-prettier --write "**/*.{json,md,yml,yaml}" .eslintrc.js --cache
-
+prettier --write "**/*.{json,md,yml,yaml}" .eslintrc.js --cache

sd.config.js

@@ -53,94 +53,93 @@ const figmaVariablesCollections = Object.entries(figmaVariables).map(
 
 const designTokens = deepmerge.all(Object.values(figmaVariablesCollections))
 
-function isPrimitiveToken(token) {
-  return (
-    token.original.extensions.ReactNativeEssentials.collectionName ===
-    'primitives'
-  )
-}
-
 function isSemanticToken(token) {
   return (
     token.original.extensions.ReactNativeEssentials.collectionName ===
     'semantics'
   )
 }
 
-function isFunctionalToken(token) {
-  return (
-    token.original.extensions.ReactNativeEssentials.collectionName === 'tokens'
-  )
+/**
+ * Generates a file configuration object for design tokens.
+ *
+ * @param {Object} params - The parameters for file configuration.
+ * @param {'color' | 'size'} params.category - The category of the token.
+ * @param {'background' | 'border' | 'text' | 'tint' | 'spacing' | 'radius'} params.type - The type of the token.
+ * @param {function} params.tokenPredicateFn - A function that takes a token and returns a boolean indicating whether the token should be included.
+ * @param {string} params.fileName - The name of the file to which the tokens will be written.
+ * @returns {Object} An object containing the format, destination, and filter function for the design tokens.
+ */
+function createFileConfig({ category, type, tokenPredicateFn, fileName }) {
+  return {
+    format: 'javascript/es6',
+    destination: fileName,
+    filter: token =>
+      (category ? token.attributes.category === category : true) &&
+      (type ? token.attributes.type === type : true) &&
+      (tokenPredicateFn ? tokenPredicateFn(token) : true),
+  }
 }
 
 module.exports = {
   tokens: designTokens,
   platforms: {
-    'color: primitives & tokens': {
+    'color: semantics': {
       transforms: ['attribute/cti', 'name/ti/camel/strip', 'color/hex8'],
       buildPath: './shared/theme/tokens/',
-      options: { stripFromPath: ['color'] },
-      files: [
-        {
-          format: 'javascript/es6',
-          destination: 'colorPrimitives.ts',
-          filter: token => token.type === 'color' && isPrimitiveToken(token),
-        },
-        {
-          format: 'javascript/es6',
-          destination: 'colorTokens.ts',
-          filter: token => token.type === 'color' && isFunctionalToken(token),
-        },
-      ],
-    },
-    'size: primitives & tokens': {
-      transforms: ['attribute/cti', 'name/ti/camel/strip'],
-      buildPath: './shared/theme/tokens/',
-      options: { stripFromPath: ['size'] },
+      options: {
+        stripFromPath: ['color', 'background', 'tint', 'text', 'border'],
+      },
       files: [
-        {
-          format: 'javascript/es6',
-          destination: 'sizePrimitives.ts',
-          filter: token =>
-            token.type === 'dimension' && isPrimitiveToken(token),
-        },
-        {
-          format: 'javascript/es6',
-          destination: 'sizeTokens.ts',
-          filter: token =>
-            token.type === 'dimension' && isFunctionalToken(token),
-        },
+        createFileConfig({
+          category: 'color',
+          type: 'background',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'colorBackgroundSemantics.ts',
+        }),
+        createFileConfig({
+          category: 'color',
+          type: 'tint',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'colorTintSemantics.ts',
+        }),
+        createFileConfig({
+          category: 'color',
+          type: 'text',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'colorTextSemantics.ts',
+        }),
+        createFileConfig({
+          category: 'color',
+          type: 'border',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'colorBorderSemantics.ts',
+        }),
       ],
     },
     'size: semantics': {
       transforms: ['attribute/cti', 'name/ti/camel/strip'],
       buildPath: './shared/theme/tokens/',
       options: { stripFromPath: ['size', 'spacing', 'radius', 'border'] },
       files: [
-        {
-          format: 'javascript/es6',
-          destination: 'sizeSpacingSemantics.ts',
-          filter: token =>
-            token.type === 'dimension' &&
-            token.path.includes('spacing') &&
-            isSemanticToken(token),
-        },
-        {
-          format: 'javascript/es6',
-          destination: 'sizeRadiusSemantics.ts',
-          filter: token =>
-            token.type === 'dimension' &&
-            token.path.includes('radius') &&
-            isSemanticToken(token),
-        },
-        {
-          format: 'javascript/es6',
-          destination: 'sizeBorderSemantics.ts',
-          filter: token =>
-            token.type === 'dimension' &&
-            token.path.includes('border') &&
-            isSemanticToken(token),
-        },
+        createFileConfig({
+          category: 'size',
+          type: 'spacing',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'sizeSpacingSemantics.ts',
+        }),
+        createFileConfig({
+          category: 'size',
+          type: 'radius',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'sizeRadiusSemantics.ts',
+        }),
+        createFileConfig({
+          category: 'size',
+          type: 'border',
+          tokenPredicateFn: isSemanticToken,
+          fileName: 'sizeBorderSemantics.ts',
+        }),
       ],
     },
   },

shared/theme/index.ts

@@ -1,22 +1,37 @@
-import * as colorPrimitives from './tokens/colorPrimitives'
-import * as colorTokens from './tokens/colorTokens'
+import * as colorBackgroundSemantics from './tokens/colorBackgroundSemantics'
+import * as colorBorderSemantics from './tokens/colorBorderSemantics'
+import * as colorTextSemantics from './tokens/colorTextSemantics'
+import * as colorTintSemantics from './tokens/colorTintSemantics'
 import * as sizeBorderSemantics from './tokens/sizeBorderSemantics'
-import * as sizePrimitives from './tokens/sizePrimitives'
 import * as sizeRadiusSemantics from './tokens/sizeRadiusSemantics'
 import * as sizeSpacingSemantics from './tokens/sizeSpacingSemantics'
-import * as sizeTokens from './tokens/sizeTokens'
+
+//  prettier-ignore
+const hexAlphaSuffixes = ['00', '03', '05', '08', '0A', '0D', '0F', '12', '14', '17', '1A', '1C', '1F', '21', '24', '26', '29', '2B', '2E', '30', '33', '36', '38', '3B', '3D', '40', '42', '45', '47', '4A', '4D', '4F', '52', '54', '57', '59', '5C', '5E', '61', '63', '66', '69', '6B', '6E', '70', '73', '75', '78', '7A', '7D', '80', '82', '85', '87', '8A', '8C', '8F', '91', '94', '96', '99', '9C', '9E', 'A1', 'A3', 'A6', 'A8', 'AB', 'AD', 'B0', 'B3', 'B5', 'B8', 'BA', 'BD', 'BF', 'C2', 'C4', 'C7', 'C9', 'CC', 'CF', 'D1', 'D4', 'D6', 'D9', 'DB', 'DE', 'E0', 'E3', 'E6', 'E8', 'EB', 'ED', 'F0', 'F2', 'F5', 'F7', 'FA', 'FC', 'FF'] as const
+
+export function changeHexAlpha(hexColor: string, opacityPercentage: number) {
+  if (!/^#(?:[a-f\d]{6}(?:[a-f\d]{2})?)$/i.test(hexColor)) return hexColor
+
+  const suffix =
+    hexAlphaSuffixes[Math.min(Math.max(Math.round(opacityPercentage), 0), 100)]
+
+  if (hexColor.length === 7) return `${hexColor}${suffix}`
+
+  return `${hexColor.slice(0, 7)}${suffix}`
+}
 
 const colors = {
-  primitives: colorPrimitives,
-  tokens: colorTokens,
+  background: colorBackgroundSemantics,
+  text: colorTextSemantics,
+  tint: colorTintSemantics,
+  border: colorBorderSemantics,
+  manipulators: { changeHexAlpha },
 }
 
 const sizes = {
-  primitives: sizePrimitives,
   radius: sizeRadiusSemantics,
   border: sizeBorderSemantics,
   spacing: sizeSpacingSemantics,
-  tokens: sizeTokens,
 }
 
 export { colors, sizes }

shared/theme/tokens/colorBackgroundSemantics.ts

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 12 Jan 2024 04:20:14 GMT
+ */
+
+export const primary = '#ffffffff'
+export const secondary = '#e6e6e6ff'
+export const accent = '#490448ff'
+export const accentMuted = '#ae84aeff'
+export const brand = '#dbff00ff'
+export const reflection = '#000000ff'
+export const transparent = '#ffffff00'

shared/theme/tokens/colorBorderSemantics.ts

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 12 Jan 2024 04:20:14 GMT
+ */
+
+export const base = '#000000ff'
+export const accent = '#490448ff'
+export const transparent = '#ffffff00'