Infra/ update outline design tokens (#1959)

Author: lidord-wix

demo/src/screens/componentScreens/AvatarsScreen.tsx

@@ -65,7 +65,7 @@ const examples = [
       icon: star,
       size: 14,
       borderWidth: 1.5,
-      borderColor: Colors.$outlineLight,
+      borderColor: Colors.$outlineInverted,
       iconStyle: {backgroundColor: Colors.$backgroundWarningHeavy}
     }
   },
@@ -107,7 +107,7 @@ const examples = [
       label: '+2',
       size: 24,
       borderWidth: 1.5,
-      borderColor: Colors.$outlineLight
+      borderColor: Colors.$outlineInverted
     }
   }
 ];

demo/src/screens/componentScreens/SliderScreen.tsx

@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
     height: 20,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: Colors.$outlineNeutral
+    borderColor: Colors.$outlineDefault
   },
   group: {
     backgroundColor: Colors.$backgroundNeutralMedium,

demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -110,7 +110,7 @@ export default class ToastsScreen extends Component {
         // backgroundColor={Colors.$backgroundSuccess}
         // icon={Assets.icons.demo.add}
         // iconColor={Colors.$backgroundSuccessHeavy}
-        // style={{borderWidth: 1, borderColor: Colors.$outlineNeutralMedium}}
+        // style={{borderWidth: 1, borderColor: Colors.$outlineDisabled}}
         // messageStyle={Typography.text80BO}
       >
         {isCustomContent ? this.renderCustomContent() : undefined}

src/components/dateTimePicker/index.tsx

@@ -306,7 +306,7 @@ const styles = StyleSheet.create({
   header: {
     height: 56,
     borderBottomWidth: 1,
-    borderBottomColor: Colors.$outlineNeutral
+    borderBottomColor: Colors.$outlineDefault
   },
   dialog: {
     backgroundColor: Colors.$backgroundDefault,

src/components/picker/PickerItem.tsx

@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
   container: {
     height: 56.5,
     paddingHorizontal: 23,
-    borderColor: Colors.$outlineNeutral,
+    borderColor: Colors.$outlineDefault,
     borderBottomWidth: 1
   },
   labelText: {

src/components/picker/PickerItemsList.tsx

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingLeft: 16,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.$outlineNeutral
+    borderBottomColor: Colors.$outlineDefault
   },
   searchIcon: {
     marginRight: 12

src/incubator/Dialog/DialogHeader.tsx

@@ -53,7 +53,7 @@ const styles = StyleSheet.create({
     height: Spacings.s1,
     marginTop: Spacings.s2,
     marginBottom: Spacings.s2,
-    backgroundColor: Colors.$outlineNeutral,
+    backgroundColor: Colors.$outlineDefault,
     borderRadius: BorderRadiuses.br10
   }
 });

src/incubator/TextField/presets/default.ts

@@ -10,7 +10,7 @@ const colorByState = {
 const styles = StyleSheet.create({
   field: {
     borderBottomWidth: 1,
-    borderBottomColor: Colors.$outlineNeutralMedium,
+    borderBottomColor: Colors.$outlineDisabled,
     paddingBottom: Spacings.s2
   },
   input: {

src/incubator/WheelPicker/index.tsx

@@ -302,7 +302,7 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderBottomWidth: 1,
     height: Spacings.s9,
-    borderColor: Colors.$outlineNeutral
+    borderColor: Colors.$outlineDefault
   },
   label: {
     position: 'absolute',

src/style/designTokens.ts

@@ -59,9 +59,7 @@ export default {
   $iconDisabled: colorsPalette.grey50,
 
   // OUTLINE
-  $outlineLight: colorsPalette.white,
-  $outlineNeutral: colorsPalette.grey60,
-  $outlineNeutralMedium: colorsPalette.grey50,
+  $outlineDefault: colorsPalette.grey60,
   $outlineDisabled: colorsPalette.grey50,
   $outlineDisabledHeavy: colorsPalette.grey30,
   $outlinePrimary: colorsPalette.violet30,

src/style/designTokensDM.ts

@@ -59,9 +59,7 @@ export default {
   $iconDisabled: colorsPalette.grey20,
 
   // OUTLINE
-  $outlineLight: colorsPalette.grey70,
-  $outlineNeutral: colorsPalette.grey10,
-  $outlineNeutralMedium: colorsPalette.grey20,
+  $outlineDefault: colorsPalette.grey10,
   $outlineDisabled: colorsPalette.grey20,
   $outlineDisabledHeavy: colorsPalette.grey40,
   $outlinePrimary: colorsPalette.violet50,