Design Tokens - Wizard (#2026)

* Design Tokens - Wizard

* Add missing $

Author: M-i-k-e-l

src/components/wizard/WizardStates.ts

@@ -4,16 +4,27 @@ const exclamationSmall = require('./assets/exclamationSmall.png');
 import {WizardStepsConfig} from './types';
 
 export const StatesConfig: WizardStepsConfig = {
-  enabled: {color: Colors.grey30, circleColor: Colors.grey60, enabled: true},
-  disabled: {color: Colors.grey50, circleColor: Colors.grey60},
-  error: {color: Colors.red30, icon: exclamationSmall, enabled: true, accessibilityInfo: 'Validation Error'},
-  skipped: {color: Colors.red30, enabled: true, accessibilityInfo: 'Not completed'},
+  enabled: {color: Colors.$textNeutralHeavy, circleColor: Colors.$outlineDisabled, enabled: true},
+  disabled: {color: Colors.$textDisabled, circleColor: Colors.$outlineDefault},
+  error: {
+    color: Colors.$iconDangerLight,
+    circleColor: Colors.$outlineDanger,
+    icon: exclamationSmall,
+    enabled: true,
+    accessibilityInfo: 'Validation Error'
+  },
+  skipped: {
+    color: Colors.$textDangerLight,
+    circleColor: Colors.$outlineDanger,
+    enabled: true,
+    accessibilityInfo: 'Not completed'
+  },
   completed: {
-    color: Colors.grey30,
-    circleColor: Colors.grey60,
+    color: Colors.$iconNeutral,
+    circleColor: Colors.$outlineDisabled,
     icon: checkMarkSmall,
     enabled: true,
     accessibilityInfo: 'Completed'
   },
-  active: {color: Colors.blue10, circleColor: Colors.blue10}
+  active: {color: Colors.$textPrimary, circleColor: Colors.$outlinePrimary}
 };

src/components/wizard/WizardStep.tsx

@@ -118,7 +118,7 @@ export default asBaseComponent<WizardStepProps>(WizardStep);
 const styles = StyleSheet.create({
   connector: {
     borderWidth: 0.5,
-    borderColor: Colors.grey60
+    borderColor: Colors.$outlineDisabled
   },
   circle: {
     width: 24,
@@ -130,6 +130,6 @@ const styles = StyleSheet.create({
   },
   label: {
     marginHorizontal: 8,
-    color: Colors.grey20
+    color: Colors.$textNeutralHeavy
   }
 });

src/components/wizard/index.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, Platform} from 'react-native';
+import {StyleSheet} from 'react-native';
 import View from '../view';
 import {Constants, asBaseComponent} from '../../commons/new';
 import Colors from '../../style/colors';
@@ -103,19 +103,14 @@ export default asBaseComponent<WizardProps, typeof Wizard>(Wizard);
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundElevated,
     paddingVertical: 10,
     paddingHorizontal: 15,
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '100%',
-    ...Platform.select({
-      ios: {
-        ...Shadows.white30.bottom
-      },
-      android: {
-        elevation: 2
-      }
-    })
+    ...Shadows.sh10.bottom,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.$outlineDisabled
   }
 });